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.
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">.
I am currently using the CSS bootstrap 3.2 in my application.
I am trying to place 2 drop down menu "with the arrow only- not button style" next to each other and then to the right I want to add a search bar.
I want to use the the dropdown menu that the bootstrap has but without the button style "arrow only" and a small search bar to the right in the vertical center.
I have tried to do that but the dropdown menus and the search bar do not line up.
here is a screenshot of what I have done
and here is my code
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Profile</li>
<li role="presentation" class="divider"></li>
<li>Logout</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Company Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu"><li><a class="master_client_change" href="#" id="current_client_id_2">Comp 1</a></li><li><a class="master_client_change" href="#" id="current_client_id_1">Comp 2</a></li><li><a class="master_client_change" href="#" id="current_client_id_3">Comp 3</a></li><li><a class="master_client_change" href="#" id="current_client_id_6">Comp 4</a></li></ul>
</li>
</ul>
<div class="width-sm-size box-inline-block">
<form action="/accounts_search.php" method="get" id="searchforactivities" class="navbar-form navbar-right row-right-xxsm-margin" role="search">
<div class="input-group">
<input type="search" class="form-control" name="search_term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go</button>
</span>
</div>
</form>
</div>
How can I get the dropdown menu and the search bar to line up?
and is there a trick in making the search bar little fancy by making the the corners of the input round and the Go button a search icon?
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..
Using the latest version Bootstrap, I am wanting to replace the branding area text with a logo. On my desktop, it looks perfect, on my iPhone, the logo appears under the small collapse menu, whereas it should be beside it (to the left of it). If I make the logo smaller, it works fine on the iPhone, but the small logo is too small for the desktop site. I thought by adding the img-responsive class to the logo, it would shrink accordingly, but that fails. If you want to replicate this, the logo is 276px wide 40px high.
Everything appears fine on the iPhone in horizontal orientation (it is strictly a problem when viewing in vertical, which is naturally the way most people hold their phone).
Here is the related code (you will notice near the bottom, there is a purchase button, this automatically gets hidden on the iPhone, which would suffice for the logo if there is no other option). Mind, the ultimate solution would be to have the logo shrink based on screen size.
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Application <b class="caret"></b>
<ul class="dropdown-menu">
<li>Features</li>
<li>Screenshots</li>
<li>Demos</li>
<li class="divider"></li>
<li>Purchase</li>
<li>Licensing Model</li>
</ul>
</li>
<li class="dropdown">
Documentation <b class="caret"></b>
<ul class="dropdown-menu">
<li>Version Info</li>
<li>System Requirements</li>
<li class="divider"></li>
<li>Installation Guide</li>
<li>Integration Guide</li>
<li>Frontdesk Manual</li>
</ul>
</li>
<li class="dropdown">
Support <b class="caret"></b>
<ul class="dropdown-menu">
<li>Knowledgebase</li>
<li>Submit Ticket</li>
<li>View Ticket Status</li>
<li class="divider"></li>
<li>Installation Service</li>
<li>Development Services</li>
</ul>
</li>
<li class="dropdown">
Contact <b class="caret"></b>
<ul class="dropdown-menu">
<li>Presales Questions</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">
Legal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Privacy Policy</li>
<li>Terms of Use</li>
<li>Site Security</li>
<li class="divider"></li>
<li>Money Back Guarantee</li>
</ul>
</li>
</ul>
<button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button>
</div>
<!--/.nav-collapse -->
This fixes the I-phone issue with the brand logo appearing under the collapsed menu icon. you might have to play with the width a bit depending on your setup:
#media (max-width: 500px) {
.navbar-brand{
width:60%;
}
}
Put your image as a background in css with background-size:cover.
I am trying make a search bar which should look some thing like this:
http://s22.postimg.org/ecaxmtj8x/search_bar.png
I am using bootstrap 3. In the code below I have 3 buttons, where the "menu 2" button opens a dropdown menu. I would like the "menu 1" button to open a menu too. But so far my attempts have failed.
When I try to group the buttons into a btn-group, it seperates from the joined search bar, which is not what I want. Is there a way to have 2 menu's inside a div using the input-group class?
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
<button class="btn btn-primary" type="button">
test 1 <span class="caret"></span>
</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
test 2 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</div>
I faced the same problem and found a pure bootstrap solution. Avoid any extra css "repairs" by wrapping all drop down buttons in a single input-group-btn div, then each drop down button wrap in a btn-group div. Using multiple input-group-btn divs in a single input-group div breaks the styling and requires css repairs as offered in another solution. The bootstrap doc hints at this. Here is a simple example to demonstrate:
<div class="input-group">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-a</span></button>
<ul class="dropdown-menu">
<li>li-a-1</li>
<li>li-a-2</li>
<li>li-a-3</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-b</span></button>
<ul class="dropdown-menu">
<li>li-b-1</li>
<li>li-b-2</li>
<li>li-b-3</li>
</ul>
</div>
</div>
<input class="form-control" type="text" placeholder="search">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</input>
</div>
It's quite easy to do that. Though I employed a small hack to make it look proper (It may be done without that hack too I think ... Not too sure )
jsFiddle Demo : http://jsfiddle.net/niranjan94/dgs25/
HTML:
<div class="col-lg-6 visible-xs">
<br>
<form action="" method="get" role="search">
<div class="input-group input-group-lg">
<input type="text" name="query" class="form-control" placeholder="Search Advertisements">
<span class="input-group-btn">
<button class="btn btn-primary custom" type="submit"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-primary dropdown-toggle custom" data-toggle="dropdown">Button 1 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</span>
<span class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Button 2 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</span>
</div>
</form>
</div>
CSS (Overriding default border-radius to make it look proper):
.custom{
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
(There might be other better ways to do this too)
That's it ... :) Hope it solves your problem .
Well, for starters you havent set the data-toggle="dropdown" for button test 1
The link to the image you posted doesnt work, but you need to also set a div.input-group-btn to wrap those button and ul.
You should take a closer look at Bootsrap documentation.