Div not scrolling in column - html

I have this bootply here and in the right side column I've created some panels in a div. I'm trying to get it so that the panels scroll inside the column, but not the whole page (I don't want the header or footer to scroll above and below the panels), but for some reason the 'overflow-y: scroll' is disable or not working!
Here is my code
html,body,.container {
height:calc(100% - 17px);
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 0px 0 0 0; /*set left/right padding according to needs*/
box-sizing: border-box;
}
.row {
height: 100%;
display: table-row;
}
.col-md-3 {
background: pink;
}
.col-md-9 {
background: yellow;
}
.row .no-float {
display: table-cell;
float: none;
}
header, footer {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid lightgrey;
background: white;
}
footer {
border-top: 1px solid lightgrey;
position: absolute;
bottom: 0;
width: 100%;
}
<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 type="text" class="form-control" placeholder="Search">
</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">
<div class="row">
<div class="col-md-6 no-float">Navigation</div>
<div class="col-sm-6 no-float" style="padding-left: 0px; padding-right: 0px;">
<header>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">Events</button>
<button type="button" class="btn btn-default">Hosts</button>
<button type="button" class="btn btn-default">Teachers</button>
</div>
</header>
<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>
<footer>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Events</button>
<button type="button" class="btn btn-default">Hosts</button>
<button type="button" class="btn btn-default">Teachers</button>
</div>
</footer>
</div>
</div>
</div>

You need to assign the height to #eventsContainer to make it scroll. So use the CSS's calc() function. Like:
#eventsContainer {
height: calc(100% - 122px); /* Total Height - Height of (header + footer) */
}
Have a look at the working snippet below:
#eventsContainer {
height: calc(100% - 122px);
}
html,body,.container {
height:calc(100% - 17px);
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 0px 0 0 0; /*set left/right padding according to needs*/
box-sizing: border-box;
}
.row {
height: 100%;
display: table-row;
}
.col-md-3 {
background: pink;
}
.col-md-9 {
background: yellow;
}
.row .no-float {
display: table-cell;
float: none;
}
header, footer {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid lightgrey;
background: white;
}
footer {
border-top: 1px solid lightgrey;
position: absolute;
bottom: 0;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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 type="text" class="form-control" placeholder="Search">
</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">
<div class="row">
<div class="col-md-6 no-float">Navigation</div>
<div class="col-sm-6 no-float" style="padding-left: 0px; padding-right: 0px;">
<header>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">Events</button>
<button type="button" class="btn btn-default">Hosts</button>
<button type="button" class="btn btn-default">Teachers</button>
</div>
</header>
<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>
<footer>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Events</button>
<button type="button" class="btn btn-default">Hosts</button>
<button type="button" class="btn btn-default">Teachers</button>
</div>
</footer>
</div>
</div>
</div>
Hope this helps!

The problem is that overflow will only work when the content tries to exceed the container. In your example, the #eventsContainer has no set height, and due to the nature of HTML (which is to expand vertically to fit the content), the content was pushing out.
In order to achieve the scroll, your #eventsContainer has to have a set height.
However, since I assume you want this height to be dynamic, and not be something static like '300px', I whipped up a jsfiddle to demonstrate absolute positioning to create a full-screen version without pushing outside.

Related

Increasing my navbar size/height throws off my bootstrap full height columns

I want to make my bootstrap navbar bigger (bigger buttons, bigger input, height, etc) but after I make the 1st element large (input -> input-lg) in the navbar it ruins my 2 columns that are full height. It creates an outer scroll on the page that I don't want.
I have this bootply here that has a navbar and 2 columns that are 100% height and you can see the outer scroll bar created because of the large input in the navbar. If I remove the large input from the navbar the navbar shrinks and the columns resize back to full height and the outer scroll goes away.
Question - is there a good plugin or library for bootstrap navbars that will let me make them bigger then the standard size and customize them?
Here is 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: block;
width: 100%;
padding-left: 0px;
padding-right: 0px;
}
.table-container .table-row {
height: 100%;
display: block;
}
.table-container .table-row .table-col {
display: block;
float: left;
vertical-align: top;
height: 100%;
/*overflow-y: scroll;*/
}
#eventsContainer,
#hostsContainer,
#teachersContainer {
height: 100%;
overflow-y: scroll;
position: relative;
}
.table-row {
margin: 0;
}
.resultBtn:focus {
outline: none;
}
<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 input-lg" 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 table-container">
<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>
Before the change of your input, your .navbar has a min-height of 50px, and the .table-container's height was calc(100% - 53px); (which was good, and caused your <body> element to have no scroll.
Now that your input is larger (in the .navbar) - the height of the navbar is actually 64px, and if you use calc(100% - 53px) it's not enough, and you will have a scrollbar on your <body> element.
If you have that height to be calc(100% - 64px); it will remove your scrollbar:
http://www.bootply.com/iX3kL0vmNW

Bad layout and wrapping on simple Bootstrap page

I am trying to create a simple Bootstrap page that has four input fields each with a side button. The four input fields to be in a line horizontally and centered across the screen.
With the code I have written the fields are offset to the right (so not centered) and when the screen is shrunk the wrapping looks awful. My code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WIA</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.wia-color {
color: #00DDDD;
}
.wia-navbar-logo {
margin-top: -6px;
max-height: 44px;
height: 44px;
}
.wia-top-section {
height: 800px;
background-color: transparent;
}
.wia-logo-strapline {
margin-top: 0px;
max-height: 123px;
height: 123px;
}
.wia-strapline-text {
color: white;
font-size: 40px !important;
font-family: Open Sans;
font-weight: 100;
font-style: normal;
margin-top: 38px;
}
.wia-filter-column {
width: 280px;
}
.wia-filter-row {
color: white;
margin-top: 50px;
font-size: 18px;
font-weight: 400;
}
.wia-filter-container {
width: 250px;
white-space: nowrap;
float:left;
}
.wia-filter-label {
color: white;
font-size: 18px;
font-weight: 200;
float: left;
padding-left: 10px;
margin-bottom: 4px;
}
.wia-filter-value {
value: 'xxx';
width: 200px;
height: 30px;
background-color: #141414;
border-style: solid;
border-left-width: 3px;
border-left-color: #00DDDD;
border-top: none;
border-bottom: none;
border-right: none;
color: white;
font-size: 18px;
font-weight: 200;
padding-left: 4px;
}
.wia-filter-button {
width: 30px;
height: 30px;
background-color: #222626;
color: #00DDDD;
border: none;
vertical-align: top;
margin-left: -5px;
font-weight:100;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.navbar-inverse {
background-color: #222626;
height: 64px;
max-height: 64px;
min-height: 64px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Donate</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron wia-top-section">
<div class="container-fluid">
<div class="row wia-filter-row">
<div class="col-sm-2">
</div>
<div class="col-sm-2 wia-filter-column">
<div class="wia-filter-label">
What
</div>
<br/>
<div class="wia-filter-container">
<input class="wia-filter-value" type="text" placeholder="One">
<button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<div class="col-sm-2 wia-filter-label wia-filter-column">
<div class="wia-filter-label">
Where
</div>
<br/>
<div class="wia-filter-container">
<input class="wia-filter-value" type="text" placeholder="Two">
<button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<div class="col-sm-2 wia-filter-label wia-filter-column">
<div class="wia-filter-label">
When
</div>
<br/>
<div class="wia-filter-container">
<input class="wia-filter-value" type="text" placeholder="Three">
<button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<div class="col-sm-2 wia-filter-label wia-filter-column">
<div class="wia-filter-label">
Who
</div>
<br/>
<div class="wia-filter-container">
<input class="wia-filter-value" type="text" placeholder="Four">
<button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
<div class="container wia-filter-label text-center">
SOME MORE STUFF
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I have created a plunker here:
https://plnkr.co/edit/V0KVM1J2xX1FRAiFYW16?p=preview
The thing is that column elements in bootstrap are naturally floated, thus will always try to adjust to one side (in this case left).
You can try to set the CSS as something like:
.wia-filter-row {
text-align:center;
}
.wia-filter-row .col-sm-2{
float:none;
display: inline-block;
}
So you can have the columns with the proper width and displayed in one line.
By the way you don't need the empty divs to force the spacing. You can use the col-sm-offset-2.
This is what i would do. Use bootstrap grid for the layout and add my own class to change the colors.
This should help you understand and create better grids.
In the code, i have used everything bootstrap has to offer along with my custom class on 2nd button so that you can understand.
Check the code here : http://codepen.io/hunzaboy/pen/RogvQj
<div class="container" style="margin-top: 30px;">
<div class="row">
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" aria-label="..." placeholder="One">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control form-custom" aria-label="..." placeholder="Button with class">
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-custom dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" aria-label="..." placeholder="One">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" aria-label="..." placeholder="One">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</div>
<!-- /.row -->
</div>

Bootstrap navbar-fixed-top not working in side my div id="content"

I am trying to use the bootstrap navbar-fixed-top I have a bootstrap navbar in side my id="content" div, but when I add navbar-fixed-top to here
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
The navbar goes on top of every thing else.
Question: How am I able to get it so only the content that is in side my id="content" is able to scroll under the navbar?
Note: Links have been updated now with working code, Special Thanks to
#Av Avt, and thank you for every one else who had ago.
Code Example Previews
CodePen Code Preview Click Here
CodePen Full View Click Here
HTML
<header id="header">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="img-thumbnail">
<img src="holder.js/48x48" />
</div>
Administration
</div>
</div>
</div>
</header>
<nav id="column-left">
<div id="profile">
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="holder.js/64x64" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Administrator</p>
</li>
</ul>
</div>
<ul id="menu">
<li><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></li>
<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Drop Down Menu</span></a>
<ul>
<li>Link 1</li>
<li><a class="parent">Sub Drop Down Menu</a>
<ul>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<!-- navbar-fixed-top not work correct when have it in my content id -->
<div id="content">
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-bell fa-lg"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-info-circle"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="./">Logout <i class="fa fa-sign-out fa-lg"></i></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Calender</h1>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.0/holder.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
From comment:
I just would like to be able to use the navbar-fixed-top feature bootstrap has but instead of it being at top of page like in there examples would like it to be inside my content id. And the header div all ways at top.
Add the following css rules in your css:
#content{
position: relative;
}
#content .navbar-fixed-top{
position: absolute;
}
After you had the navbar at the top of #content, give #content .main-content a max-height as the view port height subtract <header>'s height, and give it overflow: auto;:
#content .main-content{
padding-top: 70px;
max-height: calc(100vh - 70px);
overflow: auto;
/*move the 40px padding (and all bottom/top padding) of #content to .main_content instead */
padding-bottom: 40px;
}
The <nav class="navbar navbar-default navbar-fixed-top navbar-shadow"> will continue to behave as a normal .navbar-fixed-top, except it now only stick at the top of #content.
Demo: http://codepen.io/anon/pen/gPpOpX
Here is the solution :
#content .navbar-fixed-top{
width: calc(100% - 245px);
top: inherit;
right: inherit;
left: inherit;
bottom:inherit;
}
you also need to give your #column-left position fixed if you want your sidebar to be fixed also
Basically you want #content should be scrollable and the rest everything should be fixed. For this I have done some changes in html and css
I moved navigation <nav class="navbar navbar-default navbar-shadow"> to #header.
Added navbar-fixed-top class to the header #header. This will fix the header to the window, only if you follow the step #3.
Removed position: relative CSS for #header.
Using CSS, added the top padding to the body which is equal to the height of #header. If you want you can do this using JS also.
Here is the working example
Don't use navbar-fixed-top and calculate the scrollable height using jQuery:
var h = $(document).height();
$('#content').css({ 'height': h - 120, 'scroll-x': 'auto' });
NOTE: You might need to recalculate the height also on $(window).resize().

Bootstrap CSS Alignment

I have been trying to get some alignment to work but I am having a hard time being successful. I'm not sure if there is already a CSS style in bootstrap for vertical alignment or not but that is what I am trying to accomplish.
I have a DIV (.well class) with an image and some text inside it. The Image aligns fine as its responsive so the height and placement is good. However, I am trying to align the button and Text vertically in the middle.
Here is a jsFiddle: http://jsfiddle.net/6z9skpeh/
<div class="col-md-6">
<div class="well wellFriends">
<div class="row">
<div class="col-md-4 friendPic">
<img src="http://oi62.tinypic.com/289j41s.jpg" class="img-responsive">
</div>
<div class="col-md-8 friendDetails">
<div class="row">
<div class="col-md-6"><strong>Bob Smith</strong>
<br><em>Department Name</em>
</div>
<div class="col-md-5 pull-right">
<!-- Single button -->
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-expanded="false">Friends <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what I have so far:
This is what I am trying to do:
You can try like this: demo
css:
.v_align {
font-size: 0;
}
.v_align >[class*="col"] {
float: none;
font-size: 14px;
display: inline-block;
vertical-align: middle;
}
HTML:
<div class="row v_align">..</div>

Remove additional space between image and div

How can I remove the additional space between the nav banner and the main banner image below it?
I removed the padding and margin, but nothing is working.
My code is below.
I don't want to set positions. Can anyone tell me what the problem is?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" style="padding-top: 0px;">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Product</li>
<li>Solutions</li>
<li>Services</li>
<li class="iphonePartnerLink">Partners</li>
<li class="iphoneContactLink">Contact</li>
</ul>
<ul class="nav" id="navSecond">
<li class="">Partners</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<header class="hero-unit-product">
<h1>
Defie Cloud Business Solutions
<small>.. changing the way businesses operate.</small>
</h1>
<p><a class="btn btn-green btn-large" href="/signup/" data-link="modal" data-target="#signup-modal">Register</a></p>
</header>
</div>
The space is coming from:
.home article.container {
margin-top: 30px;
}
Change it to:
.home article.container {
margin-top: 0;
}
The main problem is connected with <article class="container"> element - it has margin-top: 30px;.
You also have to change padding-top for .home selector. It's set to 55px now, but has to be 47px instead.