The Problem
There is this pesky white space at the bottom of my screen and it won't go away even though I do margin-bottom: 0 or padding-bottom: 0.
If someone could get rid of this white space at the bottom it would be very much appreciated!
My Code
HTML
<div class="container-fluid no-lr-padding no-b-padding">
....
<div id="Menu" class="row-fluid no-b-padding">
<div id="Menu-Header" class="header">
<h1>Problems</h1>
</div>
<div class="panel-group" id="problem-panels">
<div class="panel panel-default top-panel">
<div class="panel-heading" data-toggle="collapse" href="#collapse1">
<h4 class="panel-title">
Cox Subtraction Level 1c
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav nav-pills">
<li class="active"><a>11</a></li>
<li><a>12</a></li>
<li><a>13</a></li>
<li><a>14</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" href="#collapse2">
Cox Addition Level 3b
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">panel body 2</div>
</div>
</div>
<div class="panel panel-default bottom-panel">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" href="#collapse3">
Cox Subtraction Level 2a
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">panel body 3</div>
</div>
</div>
</div>
</div>
</div>
CSS
.no-b-padding{
padding-bottom: 0;
margin-bottom: 0;
}
JSFiddle
You need to remove the bottom margin from your problem-panels div:
#problem-panels {
margin-bottom:0;
}
jsFiddle example
Related
I am attempting to insert an image into a bootstrap accordion and when I do it makes that section (second accordian section) of the accordion remain open - where it should be collapsed initially allowing for someone to click on it to expand it.
Not sure what it is breaking in the code that is causing this.
Here is a link to code in JSfiddle: https://jsfiddle.net/penrysh/1fLfx04m/3/#&togetherjs=dJTKolqwum
<p><strong>Complete the sections below to upload content.</strong></p>
<div class="container" style="width: 90%;">
<div id="accordionCO0137098" class="panel-group" style="width: 90%;">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Access System</h4>
</div>
<div id="collapseCO0137098_0" class="panel-collapse collapse">
<div class="panel-body"><ol>
<li>Click the <strong>User Name </strong>field</li>
<li>Type your ID</li>
<li>Click the <strong>Password </strong>field</li>
<li>Type your password</li>
<li>Click the <strong>Log In </strong>button</li>
</ol></div>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">Add a New Content</h4>
</div>
<div class="panel-body"><ol>
<li>Click the <strong>Content </strong>tab at the top left of the screen<br /><a class="largeimage img-view" href="images/content.png" target="_blank"><img style="width: 248px; height: 71px;" src="images/content.png" alt="" width="225" height="56" border="0" /></a></li>
<li></li>
</ol></div>
<div class="panel-heading">
<h4 class="panel-title">Complete the Required Fields</h4>
</div>
<div id="collapseCO0137098_2" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Upload the Content</h4>
</div>
<div id="collapseCO0137098_3" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Tag the Content</h4>
</div>
<div id="collapseCO0137098_4" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Add Any Relevant Keywords</h4>
</div>
<div id="collapseCO0137098_5" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Add Folders</h4>
</div>
<div id="collapseCO0137098_6" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Add Any Relevant Search</h4>
</div>
<div id="collapseCO0137098_7" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Add Any Relevant Related Content</h4>
</div>
<div id="collapseCO0137098_8" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Send For Review</h4>
</div>
<div id="collapseCO0137098_9" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
</div>
</div>
You messed up the libraries.
Moreover, after the "panel-tile" ... "Add a New Content Object" it's required the
<div id="collapseCO0137098_1" class="panel-collapse collapse">
And, before the
`<div class="panel-heading">`
it's required the
<div class="panel panel-default">
The new jsFiddle is available here.
The snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p><strong>Complete the sections below to upload content in the LT&I CMS.</strong></p>
<div class="container" style="width: 90%;">
<div id="accordionCO0137098" class="panel-group" style="width: 90%;">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_0" data-toggle="collapse"
data-parent="#accordionCO0137098">Access the CMS</a></h4>
</div>
<div id="collapseCO0137098_0" class="panel-collapse collapse">
<div class="panel-body">
<ol>
<li><a href="https://klcm.antheminc.com/aries/index.cfm?" target="_blank">Click this link to
access: https://klcm.antheminc.com/aries/index.cfm?</a></li>
<li>Click the <strong>User Name </strong>field</li>
<li>Type your US Domain ID</li>
<li>Click the <strong>Password </strong>field</li>
<li>Type your US Domain password</li>
<li>Click the <strong>Log In </strong>button</li>
</ol>
</div>
</div>
</div>
<!-- FIX: next line missing -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_1" data-toggle="collapse"
data-parent="#accordionCO0137098">Add a New Content Object</a></h4>
</div>
<!-- FIX: next line missing -->
<div id="collapseCO0137098_1" class="panel-collapse collapse">
<div class="panel-body">
<ol>
<li>Click the <strong>Content </strong>tab at the top left of the screen<br/><a
class="largeimage img-view" href="images/content.png" target="_blank"><img
style="width: 248px; height: 71px;" src="images/content.png" alt="" width="225"
height="56"
border="0"/></a></li>
<li></li>
</ol>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_2" data-toggle="collapse"
data-parent="#accordionCO0137098">Complete the Required Fields On the
Properties
Panel</a></h4>
</div>
<div id="collapseCO0137098_2" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_3" data-toggle="collapse"
data-parent="#accordionCO0137098">Upload the Content on the Content Panel</a>
</h4>
</div>
<div id="collapseCO0137098_3" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_4" data-toggle="collapse"
data-parent="#accordionCO0137098">Tag the Content Items With All Applicable
Categories</a></h4>
</div>
<div id="collapseCO0137098_4" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_5" data-toggle="collapse"
data-parent="#accordionCO0137098">Add Any Relevant Keywords</a></h4>
</div>
<div id="collapseCO0137098_5" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_6" data-toggle="collapse"
data-parent="#accordionCO0137098">Add Folders to Content Item</a></h4>
</div>
<div id="collapseCO0137098_6" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_7" data-toggle="collapse"
data-parent="#accordionCO0137098">Add Any Relevant Search Collections</a></h4>
</div>
<div id="collapseCO0137098_7" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_8" data-toggle="collapse"
data-parent="#accordionCO0137098">Add Any Relevant Related Content</a></h4>
</div>
<div id="collapseCO0137098_8" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseCO0137098_9" data-toggle="collapse"
data-parent="#accordionCO0137098">Send For Review</a></h4>
</div>
<div id="collapseCO0137098_9" class="panel-collapse collapse">
<div class="panel-body">
<p>Note: You may type a note here.</p>
</div>
</div>
</div>
</div>
I've copied the examples here and here to display an accordion using Bootstrap, but the different elements in my accordion won't appear separately from each other. Here's what my code produces for a two element accordion and what it looks like:
Here's what it's supposed to look like:
Here's my html which is just like the two sites I linked above:
<div class="panel-group" id="accordion">
<div id="reports-accordion">
<div class='panel panel-default'>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Acquisitions</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Panel body
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Circulation</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
</div>
This is the css and js I'm including:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
How do I get the division and spacing between elements in my accordion to display correctly? Thank you.
You Need to modify your structure try this code
<div class="panel-group" id="accordion">
<div id="reports-accordion">
<div class='panel panel-default'>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Acquisitions</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Panel body
</div>
</div>
</div>
<div class='panel panel-default'>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Circulation</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
</div>
Even you can try on your existing structure I think you are missing margin-top property
.panel-heading {
margin-top: 5px;
}
Try adding this code and if possible please share your code in fiddle
i don't know if the title of my question is related to my problem because i couldn't get better than this sentence ;
i have problem with this code , i have two fixed navbar one in the top and the other in the left and the real problem is like this image and on jsfiddle
the problem is the top nav is above the other nav and i need the top one to be next the left nav like this
the real problem also when i'm using container the other div come above the left side like this photo
how can i fix this problem ? ?
my code is
<body style="background-color:#F2F2F2">
<div style="position: relative; z-index: 3;">
<div class="navbar-fixed-top" style="background-color:#3e474f;height:643px;width:69px;z-index: 2;">
<ul>
<li><a class="fa fa-th-large fa-2x"href="#"></a></li> <li><a class="fa fa-th-large fa-2x"href="#"></a></li> <li><a class="fa fa-th-large fa-2x"href="#"></a></li> <li><a class="fa fa-th-large fa-2x"href="#"></a></li>
</ul>
</div>
<nav style="z-index: 1"class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav ">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div>
ass="container">
<div class="row">
<div class="col-sm-6 ">
<div class="panel-group ">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>
</div>
<!-------->
</body>
and on jsfiddle
So, try add you your .navbar and .row - margin-left value.
.navbar, .row {
margin-left: 69px;
}
Alesha's answer is correct, but I noticed it leaves the panel contents hidden, to fix it add this code instead.
.row{
padding-top:50px;
padding-left:75px;
}
.navbar-brand{
padding-left: 75px;
}
How I can nested one panel in div?
Problem is when this panel nested in div is open then cannot close when I open other panel. I need this because I am going to hide few panel. The div which panels are nested I want to set on display: none.
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">Panel 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Panel 2</div>
</div>
</div>
<div class="divWhichIWantHide">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Panel 3</div>
</div>
</div>
</div>
SAMPLE
When wrapping a div to another div, ask yourself : in what this particular div is special ? Can this div be avoided ?
In general, when you add a div to wrap another div, lets say this :
<div class="div1">
<div class="div2"></div>
</div>
You can merge the "class" to themselves, like you must have seen with Bootstrap components :
<div class="div1 div2"></div>
Doing that, you just have to be sure properties of div1 will not alter effect of css for class div2.
here is your fixed project : Editable Bootply sample
I am trying to place two nested accordions within the same row so that they appear side-by-side both taking up half the space of the parent accordion.
html:
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">This is a simple accordion inner content...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group #2 (With nested accordion inside)
</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- Here we insert another nested accordion -->
<div class="row">
<div class="col-md-3">
<div class="panel-group sub-panel" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Collapsible Inner Group Item #1
</a></h4>
</div>
<div id="collapseInnerOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo">
Collapsible Inner Group Item #2
</a></h4>
</div>
<div id="collapseInnerTwo" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</div>
css:
.panel-heading {
background: #00BFFF !important;
text-align: center;
}
#accordion3 {
float: right;
}
.sub-panel {
display: inline;
}
here is a link to a JS fiddle: http://jsfiddle.net/tdcqgo4k/
Ive tried using .row .row-fluid with .span* as well as trying to use col-- classes. please help!
Remove float from your CSS for the third accordian, and change your column definitions to both use col-xs-6 for the column parents of the nested accordians
Demo Fiddle
HTML
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">This is a simple accordion inner content...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group #2 (With nested accordion inside)
</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- Here we insert another nested accordion -->
<div class="row">
<div class="col-xs-6">
<div class="panel-group sub-panel" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Collapsible Inner Group Item #1
</a></h4>
</div>
<div id="collapseInnerOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo">
Collapsible Inner Group Item #2
</a></h4>
</div>
<div id="collapseInnerTwo" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</div>
CSS
.panel-heading {
background: #00BFFF !important;
text-align: center;
}