I have a problem with a Bootstrap's collapsible panel
When a collapsible panel is collapsed after being shown a blank gap of the same size appears in its place.
This is happening while using Firefox (not in Chrome) and the gap dissapears if the page is resized (zoom in, zoom out).
Fragments of code involving the problematic panel:
<div class="panel panel-default cl-orange">
<a class="" href="#newAircraftType" data-toggle="collapse">
<div class="panel-agregar">
<div class="panel-plus">
<i class="fa fa-caret-right"></i>
</div>
</div>
</a>
</div>
<!--Collapsible panel-->
<div id="newAircraftType" class="panel-collapse collapse in" style="">
<div class="panel-body crear-operador form-horizontal panel-box detalle-panel-body">
<div class="form-wrapper">
<div class="form-group">
<!-- ... -->
</div>
</div>
</div>
</div>
Some screenshots:
Panel shown
Panel collapsed and gap
Panel collapsed without gap
Related
Modal Show Code
$("#classification-model").modal({
autofocus: false,
showOnFocus: false
})
.modal('setting', 'closable', false).modal('show');
Modal Hide Code
$('#classification-model').modal('hide dimmer');
Modal Html Code
<div class="ui page modals transition" id="classification-model" style="display: none !important;">
<div class="ui small modal transition visible active" style="position:relative;">
<div class="header">
<div role="list" class="ui large divided horizontal list">
<div role="listitem" class="item"><div class="content">Classification</div></div>
</div>
</div>
<div class="modalLists content classificationModalList">
<div class="ui two column grid" id="classificationModalList">
</div>
</div>
<div class="actions">
<div role="listbox" aria-expanded="false" class="ui selection dropdown main-classificationv2" tabindex="0" style="float: left;">
<div aria-atomic="true" aria-live="polite" role="alert" class="divider default text">Classification</div><i aria-hidden="true" class="dropdown icon"></i>
<div class="menu transition" id="main-classification">
</div>
</div><button class="ui icon left labeled button check-multi" onclick="ApplytoAll(this)"><i aria-hidden="true" class="check icon"></i>Apply to All</button><button class="ui icon left labeled button upload-resume" onclick="ContinueUploading(this)"><i aria-hidden="true" class="upload icon"></i>Continue Uploading</button>
</div>
</div>
</div>
how can i fix this problem semantic ui modal won't close.
modal does not close
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>
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.
I'm trying to design a page with bootstrap 3 that has the main information on the left, and then a small side-bar on the right where additional links and graphs relating to the main info will go:
http://www.bootply.com/ZLB46jDSnU
Problem is if I use container-fluid for the main body (line 55), vertical scrolling is gone even though the sidebar needs it..If I change container-fluid to container, everything works nicely BUT the main body overlaps with my sidebar. Giving me the impression the fluid layout is what I want.
Does anybody know why this interferes with scrolling? Am I taking the wrong approach to have a sidebar divs independent the page content divs?
Got it working with Skelly's help!
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="right">
<div class="panel panel-default ">
<div class="panel-heading">
<h3 class="panel-title">Shortcuts</h3>
</div>
<!--User details -->
<div class="panel-body">
<li>Milestones --»</li>
<li>Versions --»</li>
<li>CSV Report --»</li>
</div>
</div>
</div>
<div class="col-sm-8" id="left">
<!--All apps -->
<div class="panel panel-default" ng-init="">
<!-- Default panel contents -->
<div class="panel-heading clearfix">
<b>Your Applications</b>
</div>
<div class="panel-body">
<table-here></table-here>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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!