See the following code:
<div ng-controller="DropdownCtrl">
<div style="height: 100px; overflow-y: auto;">
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <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>
http://plnkr.co/edit/DwQIi6ipDgN9LIOe5TqR?p=preview
I know that the problem is the height of the div, but I need to leave the height as is.
See the screenshot from my project:
How can I solve that problem?
I use position:fixed but it is not ok, because you use overflow:
if don't use position:fixed, Remove overflow..
Related
I am trying to achieve a dropdown menu using bootstrap in a navbar. I came across this example and it obviously works perfectly. However I wanted to change the 1st dropdown ( from the left ) to a dropdown button. However if I try and change it to a button the styling gets all messed up ( see image below).
Relevant code:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo goes here</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
wrap the .btn in a wrapper classed as navbar-form to enable the padding as per the example given, like follows:
<ul class="nav navbar-nav">
<li class="dropdown">
<!-- doesn't need to be a form element -->
<form class="navbar-form">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</div>
</form>
<!-- example using div and anchor instead of form and button -->
<div class="navbar-form">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</div>
</div>
</li>
</ul>
Here it is on CodePen
There is no reason to have the btn wrapped in a form that makes no sense. In bootstrap 3 you just need to add the class .navbar-btn to the button to have it vertically align in the navbar. Also If you are only going to have the one button there is no reason to use a button group. If you are going to have more than one button then use button group. But the checked answer wrapping it in a form is just silly plus your adding another dom element for no reason. Try the following:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo goes here</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<button class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Drinkin People is correct
Simply changing this:
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
To this:
<a class="navbar-btn btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>
It will center your button vertically in the navbar
Simply changing the <a> tag into a <button> tag should do the trick.
<ul class="nav navbar-nav">
<li class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Hollywood Account</li>
<li>Another Account</li>
<li>Yet another Account</li>
</ul>
</li>
</ul>
Edit: Checked on one of my own sites. Try removing the <div class="btn-group">.
How to change navbar/container width? Bootstrap 3
While following this I am super confused.
I am still fairly new in CSS, so I am still playing around a lot with bootstrap.
I added a div right outside of the navbar div to contain the total width.
.navbar-outer {
width:1000px;
margin-left: auto;
margin-right: auto;
}
That worked well, but as soon as I narrow the browser. The "Mobile" button no longer shows. Any suggestion on changes while keeping everything intact in the css? This is for bootstrap 3.3.4.
Full code below:
<nav class="navbar navbar-default">
<div class="navbar-outer">
<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">
<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="dropdown">
Action <span class="caret"></span>
<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>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<li class="dropdown">
<img src="testimage.jpg" style="width: 25px; height: 25px;" alt="..." class="img-circle"> Me <span class="caret"></span>
<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>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
I think it might be that you are setting the width with px, meaning the collapsing feature of the Bootstrap navbar cannot be triggered. I believe it collapses at 768px.
Using min-width and max-width:
.navbar-outer {
max-width:1000px;
min-width:767px;
margin-left: auto;
margin-right: auto;
}
http://jsfiddle.net/frank184/m3n3r1tg/
When I click the dropdown button the other content under it moves down with it. The I've tried z-index, position:relative; position:static How can I prevent this from happening. I don't want anything to move when the dropdown is clicked. Any ideas?
<div class='whiteBox'>
<div class='newProducts'></div>
<div id="compareInfo">
<div id="comparisionTitle">Title</div>
<div class="divStyle">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="chooseItem">Drop down Box<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="item1DropDown" href="#">item1</a></li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<div id="compareBoxes">
<div id="Label">Text under Dropdown</div>
<button class=
"btn btn-compare" id="compareButton" type=
"submit">Submit</button>
</div>
</div>
</div>
#divStyle{
list-style:none;
position:relative;
float:left;
right:240px;
}
You have to set the div you want to have a dropdown menu like this:
list-style:none;
position:relative;
float:left;
And then set your own position for it.
Here is an excellent customizable tutorial on it.
You seem to be missing the dropdown class on your div, and the role field for the li and a tags within your dropdown. Try adding role="presentation" to those.
Like:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"...>...</button>
<ul class="dropdown-menu">
<li role="presentation"><a role="presentation ...>item1</a></li>
</ul>
</div>
This is a simplified version of a typical bootstrap navbar dropdown (in the documention you can see it working in the original navbar)
<li class="dropdown">
Dropdown <span class="caret"></span>
<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>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
and when it's clicked it toogles display:block and the position is always
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
Since bootstrap highly depends on the it's markup you need to strictly reference the documentation, so I suggest you go over your code to see what's missing.
I am getting some part of my button dropdown out of the page viewing area.
I am using standard bootstrap code:
<div class="btn-group">
<button class="btn btn-info">Log In</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Log In with Facebook</li>
<li class="divider"></li>
<li>Create New Account</li>
</ul>
</div>
I have similar issue on bottom of the page also, where I have another button dropdown and then the dropdown part opens, it does not automatically adjust itself and I have to scroll down to view all the options.
Any suggestion?
I guess you didn't position the .btn-group in the right way.
Put it into the .navbar-inner-div and add the class .pull-right.
DEMO JSFIDDLE
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
<div class="btn-group pull-right">
<button class="btn btn-info">Log In</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Log In with Facebook</li>
<li class="divider"></li>
<li>Create New Account</li>
</ul>
</div>
</div>
</div>
You can make the following:
.dropdown-menu {
left: -80px;
}
I don't know why but pulling left is useless.
I'm making a website using Twitter's Bootstrap and everything is almost set but I can't figure how to position a search bar into the main menu
Here is the website online
http://testings.coffeecup.com/index1.html
Each time I put it anywhere on the container it screws up either.
EDIT:
I managed to add it:
http://gyazo.com/e76b7cfa8e25b9ef2913d588b28ea894
But I still can't position it on the right.
The css I'm using
.navbar-search {
position: relative;
}
.navbar-search .search-query {
float:right;
}
.navbar-search .icon-search {
position: absolute;
top: 7px;
background-image: url("");
}
Right after the <div class="navbar-inner"> include the search bar <input> with whichever attributes you need .. after just float it to the right and adjust the margins so its centered vertically in the nav-bar.
You have to add the search-bar inside <div class="navbar-inner"> and after <div class="nav-collapse collapse">.
The code for the search bar:
<input id="search" class="span3" type="search" name="search" placeholder="Search">
You can use the pull-right class
i used it in the container
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
REsult :