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;
}
Related
I've looked at many examples on how to do this, but can't find one.
My code:
<!--html-->
<div id="navgroupsframe">
<div class="panel-group" id="accordion">
<div class="panel" style="margin-left: -15px;">
<div class="panel-heading">
<div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titleSpanish" onclick="removevBgs();" style="background-color: transparent;" aria-expanded="true">
<div class="groupicon">
<div class="groupicontext">S</div>
</div>
<div class="grouptext">
<div class="grouptitle">Spanish</div>
</div>
</div>
</div>
</div>
<div class="panel-collapse titleSpanish collapse in" aria-expanded="true" style="">
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="vgroupholder panel-body" data-parent="#titleSpanish" data-toggle="collapse" style="background-color: transparent;">
<div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
<div class="groupicontext" style="font-size: 40px;">C1</div>
</div>
<div class="grouptext">
<div class="grouptitle">Class 1</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-collapse titleSpanish collapse in" aria-expanded="true" style="">
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="vgroupholder panel-body" data-parent="#titleSpanish" data-toggle="collapse" style="background-color: transparent;">
<div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
<div class="groupicontext" style="font-size: 40px;">C2</div>
</div>
<div class="grouptext">
<div class="grouptitle">Class 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel" style="margin-left: -15px;">
<div class="panel-heading">
<div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;">
<div class="groupicon">
<div class="groupicontext">P</div>
</div>
<div class="grouptext">
<div class="grouptitle">Physics</div>
</div>
</div>
</div>
</div>
<div class="panel-collapse titlePhysics collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="vgroupholder panel-body" data-parent="#titlePhysics" data-toggle="collapse" style="background-color: transparent;">
<div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
<div class="groupicontext" style="font-size: 40px;">S1</div>
</div>
<div class="grouptext">
<div class="grouptitle">Set 1</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-collapse titlePhysics collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="vgroupholder panel-body" data-parent="#titlePhysics" data-toggle="collapse" style="background-color: transparent;">
<div class="groupicon" style="width: 80px;height: 80px;margin-left: 20px;">
<div class="groupicontext" style="font-size: 40px;">S2</div>
</div>
<div class="grouptext">
<div class="grouptitle">Set 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried using this:
.panel-group .panel-heading + .panel-collapse > .panel-body {
border-bottom: none;
}
But it doesn't work. All borders however are gone, apart from the bottom one.
How would I be able to fix this?
Also
How do I add negative margin-tops without causing the accordion to jump?
Any help would be really appreciated!
I have a sidebar on the right that uses 3 elements of a bootstrap grid. I am trying to have the content always to the right of this sidebar (so they must always take up 9). I currently have an accordion and an h2, however I am having a difficult time left-aligning them with the rest of the content on the page. The sidebar is coded as follows:
<div class="col-md-3">
<div class="list-group">
example
</div>
</div>
Each "content div" is as follows (these are aligning properly)
<div class="col-md-9 pull-right">
<div class="panel panel-default">
<div class="panel-heading">
<h4>title</h4>
</div>
<div class="panel-body">
<p>content</p>
</div>
</div>
</div>
This is the h2 and accordion that isn't properly aligning with the content.
<div class="col-md-9 pull-right">
<div class="row">
<div class="col-md-12">
<h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading together">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">What We Can Do Together</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>list</li>
</ul>
</div>
</div>
</div>
Image to help visualize the problem
without pull-right
Remove the pull-right from the classes list:
<div class="col-md-9 pull-right">
<!-------------------^^^^^^^^^^ This is the culprit to pull it to the right.
The pull-right class just adds float: right !important; to the styles, which make the content to be pushed right.
I am using bootstrap in Angular 2 project and I want to freeze couple of divs(with ids as filters and categories in the code) on top always, while user scrolls down the page.
This is the code that I have in jsfiddle here
Code Snippet:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="/overview">Overview</a></li>
<li routerLinkActive="active"><a routerLink="/insights">Insights</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div id="filters" class="container-fluid" style="margin-top: 60px" >
<div class="row">
<div class="col-md-2 col-sm-4">
<button>Filter 1</button>
</div>
<div class="col-md-2 col-sm-4">
<button>Filter 2</button>
</div>
</div>
</div>
<div id="categories" class="container-fluid" >
<div class="row">
<ul class="nav navbar-nav">
<li><a routerLink="#">Sub Category 1</a></li>
<li><a routerLink="#">Sub Category 2</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: blue; height: 800px;">
Trend Chart
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: green; height: 800px;">
Bar Chart
</div>
</div>
</div>
</div>
I have tried using bootstrap's 'affix', but it is breaking the scroll and the margins of 'filters' and 'categories' divs, as can be seen here
Kindly let me know if I am missing anything else that needs to be added for affix to work.
To achieve your goal you need to use position: fixed and z-index: 1030 CSS with your div
Here's the jsfiddle
Use this CSS in your div
<div id="filters" class="container-fluid"
style="margin-top: 60px; position: fixed; z-index: 1030;">
<div class="row">
<div class="col-md-2 col-sm-4">
<button>Filter 1</button>
</div>
<div class="col-md-2 col-sm-4">
<button>Filter 2</button>
</div>
</div>
</div>
Use the style attribute "position:fixed" in both the div you want to be fixed.
Also set z-index value above 100. (this is to show the fixed div over all other div while scrolling).
Example:
<div id="filters" class="container-fluid" style="margin-top: 60px;position:fixed;z-index:999;" >
<div class="row">
<div class="col-md-2 col-sm-4">
<button>Filter 1</button>
</div>
<div class="col-md-2 col-sm-4">
<button>Filter 2</button>
</div>
</div>
</div>
<div id="categories" class="container-fluid" style="position:fixed;z-index:999;" >
<div class="row">
<ul class="nav navbar-nav">
<li><a routerLink="#">Sub Category 1</a></li>
<li><a routerLink="#">Sub Category 2</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: blue; height: 800px;">
Trend Chart
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: green; height: 800px;">
Bar Chart
</div>
</div>
</div>
</div>
I have two full height columns in bootstrap where I want to render a bunch of panels in the right column. (used this So thread for full height columns answer from AndreDurao) I don't want the whole page to scroll when I have a large number of panels so I make the panels parent container element scrollable, but when I try to set the height to 100%, so that the panels scroll but not the whole page, it doesn't work right in IE! It works great in Chrome (just the inner div scrolls), but in IE the whole page scrolls. Why is it different between the 2 browsers and can this be fixed?
FYI - I tried overflow-y: auto but that didn't work either. And I can see the scroll bar for the panels div but it's greyed out like it's disabled. Using IE 11 and it looks like Edge has the same problem/bug!
Here is my bootply and my code
html, body {
height: 100%;
/*border: 1px solid red;*/
}
.table-container {
height: calc(100% - 53px);
/*border: 1px solid green;*/
}
nav.navbar {
margin: 0;
}
.table-container {
display: table;
width: 100%;
padding-left: 0px;
padding-right: 0px;
}
.table-container .table-row {
height: 100%;
display: table-row;
}
.table-container .table-row .table-col {
display: table-cell;
float: none;
vertical-align: top;
}
#eventsContainer {
height: 100%;
}
<div class="container table-container">
<div class="row table-row">
<div class="col-sm-6 table-col"></div>
<div class="col-sm-6 table-col" style="border: 1px solid red;">
<div id="eventsContainer" style="overflow-y: scroll;">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
</div>
</div>
</div>
Try this:
Check Demo Here
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row table-row">
<div class="col-sm-6 table-col">nav</div>
<div class="col-sm-6 table-col" style="border: 1px solid red;">
<div id="eventsContainer">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
/*border: 1px solid red;*/
}
nav.navbar {
margin: 0;
}
.table-row {
height: calc(100vh - 53px);
display: flex;
}
.table-col {
display: flex;
width: 100%;
}
#eventsContainer {
height: 100%;
overflow: auto;
position: absolute;
width: calc(100% - 15px);
}
I checked in firefox, chrome and IE(edge), it works..
I hope this helps you
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