I am working an Angular 4 application ,In this I have a navigation bar with text and font awesome icons .
It's UI is fine in web view but when it comes to mobile view (minimized screen) it is not aligned how I expect .
I have tried my best but I can't fix it .
In Minimized view :
How I expect :(example)
Here I have attached the stackblitz file : https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-w1qhj4?file=app%2Fapp.component.html
xs applies to every screen size if nothing else is provided, sm doesn't apply to mobile screens.
<div class="col-md-3 col-xs-12"> <!-- Changes -->
<div class="container">
<div class="row">
<div class="col-xs-2"> <!-- Changes -->
<i class="fas fa-phone text-white" style="font-size:40px"></i>
</div>
<div class="col-xs-10"> <!-- Changes -->
<div class="container">
<div class="row">
<span class="text-white text-uppercase col-sm-12">Demo 1</span>
<span class="text-white col-sm12" style="margin-left: 14px">Text Text</span>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I am currently working on a web application and I am trying to figure out how to center two bootstrap buttons side-by-side. It works on mobile, but when I try to inspect the page and view it on a mobile device, they go on separate lines and center (one on top of the other). How can I fix this so that on mobile, they appear side-by-side like on the computer? Here is the code:
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 col-lg-3 text-center">
Button 1
</div>
<div class="col-md-4 col-lg-3 text-center">
Button 2
</div>
</div>
</div>
How about this. Remove the breakpoints from your columns and make them occupy half the space no matter what screen size you are using:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col-6 text-center">
Button 1
</div>
<div class="col-6 text-center">
Button 2
</div>
</div>
</div>
This might look more cleaner
<div class="col-xl-12" style="display:flex">
<div class="btns" style="margin:auto">
<a class="btn btn-primary" href="">Button1 </a>
<a class="btn btn-primary" href="">Button2 </a>
</div>
</div>
</div>
</div>
I'm working in an offline view for PWA, I need to design this view (or very similar)
I have tried with this
#extends('layouts.app_site')
#push('styles')
#endpush
#section('content')
<div class="row">
<div class="col-lg-12">
<div class="ibox product-detail">
<div class="ibox-content">
<div class="alert alert-dark" role="alert">
You are currently offline
</div>
<div class="form-group row">
<div class="col-lg-12 text-center">
<img src="{{asset('img/gp_no_image.png')}}">
<h1>
You are currently offline
</h1>
We couldn't load the next page on this connection. Please try again.
</div>
</div>
<div class="form-footer text-center">
<a href=""
class="btn btn-primary btn-sm">Retry Connection</a>
</div>
</div>
</div>
</div>
</div>
#endsection
#push('scripts')
#endpush
And this is my result (ignore the background image)
How can I change the upper alert style like the example image? (use all ibox-content and black color)
and how can I make the retry button bigger?
for alerts, I'm using bootstrap
for buttons, I'm using inspinia
styles
thanks
i want to show 3 tiles in a one row. 3 tiles should come in one row in the mobile view also.now im able to see only 3 tiles in one row but in mobile its showing two tiles in a row. how to make 3 tiles should cover complete row and same 3 tiles i need to show mobile also .im using adminlte theme for the design
code pen
https://codepen.io/krishnakernel/pen/VQQyaV
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>64 ℃<sup style="font-size: 20px"></sup></h3>
<p><span>Oil Temperature</span></p>
</div>
<div class="icon">
<i class="fa fa-thermometer-3"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>88<span style="font-size:30px">Amp</span></h3>
<p>R Current </p>
</div>
<div class="icon">
<i class="fa fa-flash"></i>
</div>
<a href="" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>233 <span style="font-size:20px">⚡</span> </h3>
<p>R Voltage in kva</p>
</div>
<div class="icon">
<i class="fa fa-bolt"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
You didnt close the div properly
Change <div class="col-lg-3 col-xs-4">
Try changing the classes to col-xs-4 for all the elements you want to have displayed in a row.
In bootstrap, the grid summ need to be equal 12. Then if you want the xs to be a row, you need to change to col-xs-4 because you only have 3 div.
Check more info here: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
If you want your layout to always be three columns use the xs breakpoint. The different breakpoints are designed to change the layout based on screen size.
I have a website that displays many real-time graphs and gauges, all hidden within drawers initially. The graphs are made with the plotly.js library. The gauges are done with JustGage. The code for the containers is as such:
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-5 statistics">
<div class="centered-text">
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-heading">Statistics Panel</h3>
</div>
<ul class="list-group">
<!-- Base Station Panel -->
<li class="list-group-item">
<div class="row toggle" id="dropdown-detail-1" data-toggle="detail-1">
<div class="col-lg-10 text-left">
Base Station
</div>
<div class="col-lg-2"><i class="fa fa-chevron-down pull-right"></i></div>
</div>
<div id="detail-1">
<hr></hr>
<div class="container-fluid">
<div class="fluid-row">
<div class="col-lg-6">
<div id="happygraph1"></div>
<input id="happybutton1" type="button" value="View History"
onclick="happygraph1.changeMode();"/>
</div>
<div class="col-lg-6">
<div id="happygraph2"></div>
<input id="happybutton2" type="button" value="View History"
onclick="happygraph2.changeMode();"/>
</div>
</div>
<div class="fluid-row">
<div class="col-lg-6">
<div id="happygraph3"></div>
<input id="happybutton3" type="button"
value="View History" onclick="happygraph3.changeMode();"/>
</div>
</div>
<div class="container-fluid">
<div class="fluid-row">
<div class="col-sm-6">
<div id="happygauge1 style="height: 250px; width: 300px;"></div>
</div>
</div>
<div class="col-sm-6">
<div id="happygauge2" style="height: 250px; width: 300px;"></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The issue is that when the page loads, if the data begins appearing on the graphs before the hidden element is expanded, the graphs' containers extend out of the newly expanded element. However, if the element is expanded first, and then the data comes in, it acts exactly how it should. There is no issue with the gauges.
Here is a screenshot of when it's working:
graph containers stay within element
Here is a screenshot of when the element is expanded after the data has started being drawn: graph containers expand out of element
The drawers (and the layout in general) is done up by bootstrap. What is causing the containers to break? I have tried playing with the fluid row and container properties, however to no avail. Thanks in advance.
It seems the issue was not with Bootstrap at all but with some of the layout options set in Plotly. Plotly was sizing the graphs to be much larger than the container only when loaded hidden.
This is my first question and I use this site a lot for answers so hoping to get more involved.
I have a strange Chrome/CSS related problem. On a site I have built there is a hidden menu which is massive when you open it.
The problem is that if you are on Chrome and there is no initial scrollbar if you open the menu and it creates the need for a scrollbar it moves all of the content left but when you close the menu and the scrollbar disappears the body content moves back but the site header stays to the left.
I have added screenshots to demo this. I cannot give access to the site pages as it has sensitive business data on it.
Initial page load:
I can only add 2 links as don't have enough points! :(
This image is the same as the Menu Closed image but all aligned.
Menu open:
The menu here is open and has the dark background
Menu closed:
The menu is now closed and you can see the alignment is now off. You can see the background white is shifted in the top right.
This is a basic example of the CSS:
<div class="topbar">
<div class="container">
<div class="row">
<div class="visible-xs col-xs-3">
<i class="icon-handle"></i>
</div><!--col-->
<div class="col-xs-6 col-sm-4">
<a href="/" class="topbar-logo">
<img src="/images/logo.png" alt="">
</a>
</div><!--col-->
<div class="visible-xs col-xs-3"></div><!--col-->
<div class="clearfix visible-xs"></div>
<div class="col-xs-2 no-padding-right visible-xs">
<div class="page-title mobile">
<h1>TEST</h1>
</div>
</div><!--col-->
<div class="col-xs-10 col-sm-push-4 col-sm-3 hidden-xs">
<div class="topbar-block dealership">
TEST
</div><!--topbar-block-->
</div><!--col-->
<div class="col-xs-10 col-sm-push-4 col-sm-3 visible-xs no-padding-left">
<div class="topbar-block dealership">
<span class="topbar-block-smalltext">TEST</span>
</div><!--topbar-block-->
</div><!--col-->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-pull-3 col-sm-2">
<div class="topbar-block">
<span class="topbar-block-title">TEST Code</span>
<span class="topbar-block-bigtext">TEST</span>
</div><!--topbar-block-->
</div><!--col-->
<div class="col-xs-4 col-sm-pull-3 col-sm-2">
<div class="topbar-block">
<span class="topbar-block-title">Area</span>
<span class="topbar-block-bigtext"> 1-10 </span>
</div><!--topbar-block-->
</div><!--col-->
<div class="col-xs-2 col-sm-1">
<a href="/log-out.php" class="topbar-block">
<span class="topbar-block-title">Logout</span>
<i class="icon-padlock-closed topbar-block-icon"></i>
</a><!--topbar-block-->
</div><!--col-->
</div><!--row-->
</div><!--container-->
</div><!--topbar-->
<div class="mainmenu-spread">
<div class="container spaced">
<div class="row page-controls">
<div class="col-xs-6 col-sm-2">
<i class="icon-moneybox menu-option-icon"></i> <span class="moneybox-text">= N/A</span>
</div><!--col-->
<div class="col-xs-6 col-sm-3">
<a href="/golden-ticket/" class="menu-option golden-ticket-count">
<i class="icon-golden-ticket menu-option-icon"></i>
<span>
<span class="text-gold">748</span> GOLDEN TICKETS <span class="hidden-991">REDEEMED</span>
</span>
</a>
</div><!--col-->
</div><!--row-->
<nav class="mainmenu">
<h2 class="mainmenu-title">Navigation</h2>
<div class="row">
</div><!--row-->
</nav><!--mainmenu-->
</div><!--container-->
</div><!-- mainmenu-spread -->
It is the topbar that is not moving back but there is nothing to suggest why? Is it a Chrome thing?
I googled for this problem but there were just loads of things related to Chrome scrollbar complaints and couldn't find anything on here either.
Any help would be massively appreciated.
Thanks.
I actually found an answer to this.
The solution to the alignment was to add overflow:hidden; to the .topbar when the menu is closed. I'm not exactly sure why this was the fix but it worked.
We also experienced a doulbe scrollbar on pages where the content was deeper than the monitor and the menu open. To sort this we added display:none; to the main page content when the menu was opened.
Thanks if anyone looked at this and tried to think of a solution!