I need to have a dropdown pulled right. In my code below, the dropdown is perfectly pulled right, but clicking the dropdown is showing the options way off.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<button class="btn btn-info">Button</button>
</div>
<div class="col-md-8">
<form class="form-inline pull-right" role="form">
<div class="form-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Option A</li>
<li>Option B</li>
</ul>
</div> <input data-type="text" class="form-control" type="text" placeholder="Search...">
</form>
</div>
</div>
</div>
Fiddle
How can I align the options with the dropdown?
Thanks
Add a btn-group class after form-group
<div class="form-group btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Option A</li>
<li>Option B</li>
</ul>
</div>
Here is Fiddle
Related
The bootstrap is applied on the search button and the shopping cart icon but not the rest. The bootstrap does not work on the nav bar. Not sure if its just a typo problem but I got it to work earlier and then it crashed
<div class="myclass">
<nav id="myid" class="navbar navbar-dark bg-primary navbar-fixed-top" style="background-color: #171d20; height: 60px">
<form id="page" class="form-inline">
<ul class="nav navbar-nav">
<li><a class="hello" routerLink="Userlogin/home" href="">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Departments </a>
<ul class="dropdown-menu">
<li>department 1</li>
<li>department 2</li>
<li>department 3</li>
</ul>
</li>
<li (click)="onLogin()" *ngIf="!isLoggedIn">
<a routerLink="/Userlogin" class="hello" href="#">Login & Signup</a>
</li>
<li><a routerLink="/profile" class="hello" href="#">Profile</a></li>
<li *ngIf="isLoggedIn" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ username }}
</a>
<ul class="dropdown-menu">
<li><a routerLink="/Userlogin/orders" href="#2">Orders</a></li>
<li><a (click)="onLogout()">Logout</a></li>
</ul>
</li>
<li><a routerLink="Userlogin/cart" class="hello" href="#"> Cart</a></li>
<li><a routerLink="/login" class="hello" href="#">Admin</a></li>
</ul>
<div>
<a style="margin-left: 180px; margin-top: 3px; font-size: medium" class="navbar-brand">Shop24X7</a>
</div>
<input [(ngModel)]="search" name="search" size="40" style="margin-top: 11px" class="form-control mr-sm-2"
type="search" placeholder="Search for product" aria-label="search" />
<button (click)="onSearch()" style="margin-top: 11px" class="btn btn-info" type="submit">
Search
</button>
<a class="nav-link" routerLink="cart" class="fa fa-shopping-cart mr-1">
<img routerLink="cart" src="https://img.icons8.com/cute-clipart/64/000000/food-cart.png" />
</a>
</form>
</nav>
<router-outlet></router-outlet>
</div>
I have the following code:
<form class="search-bar" data-example-id="search-bar">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Search</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
What I am trying to do is get it functioning so that if a user clicks the dropdown and selections Option 1, Option 1 will be displayed in the dropdown rather than the little caret glyph.
This is using Bootstrap, just to clarify.
You use Bootstrap Select instead of Bootstrap dropdown:
http://silviomoreto.github.io/bootstrap-select/
You need to add some JS magic. Here's in jQuery flavour
jQuery
$(".dropdown-menu li a").click(function(){
$(this).parents(".input-group-btn").find('.dropdown-toggle').text($(this).text());
$(this).parents(".input-group-btn").find('.dropdown-toggle').val($(this).text());
});
Your HTML
<form class="search-bar" data-example-id="search-bar">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Search</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
And here's a working demo.
EDIT: You can stick this in the head of your page like so
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown-menu li a").click(function () {
$(this).parents(".input-group-btn").find('.dropdown-toggle').text($(this).text());
$(this).parents(".input-group-btn").find('.dropdown-toggle').val($(this).text());
});
});
</script>
I put navbar outside the container to make the nabar get the full width. But strangely now the navbar get over width (more than expected), there is a horizontal scroll bar now. this is the code:
<div class="row">
<nav class="navbar navbar-default">
<div class="container">
<section class="">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<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 class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active "><span class="glyphicon glyphicon-home"></span></li>
<li class=" dropdown">text menu<span class="caret"></span>
<ul class="dropdown-menu">
<li>text menu</li><li>text menu</li><li>text menu</li><li>text menu</li>
</ul>
</li>
<li class="" dropdown"="">text menu <span class="caret"></span>
<ul class="dropdown-menu">
<li>text menu</li><li>text menu</li><li>text menu</li>
</ul>
</li>
<li class=" ">text menu</li>
<li class=" ">text menu</li>
<li class="dropdown">text menu <span class="caret"></span>
<ul class="dropdown-menu">
<li>text menu</li>
<li>text menu</li>
</ul></li>
</ul>
<form role="form" class="navbar-form navbar-right" id="formCari" method="GET" action="search">
<div class="form-group has-feedback">
<input type="search" name="q" id="q" class="form-control" placeholder="text menu">
<i class="form-control-feedback glyphicon glyphicon-search " style="position:absolute;/*top:7px;*/"></i>
</div>
</form>
</div>
</section>
</div>
</nav>
</div>
Thank you for your help!
The problem is in the parent .row element, which is making the .navbar to display weirdly.
If you remove the class .row from the first div, it will work properly.
CSS that is causing the problem (from bootstrap)
.row {
margin-right: -15px;
margin-left: -15px;
}
Im trying to write a navbar in Bootstrap 3, there is a navbar and some brand and other stuff including a search form in it
I want the search form to fill the extra space in navbar, what should i do?
<div class="navbar navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<form class="navbar-form pull-left">
<input type="search" class="form-control search-box">
<button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
</form>
<div class="navbar-form btn-group pull-right">
<button type="button" class="btn btn-default">User</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>My Account</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
A lot has changed with Bootstrap 3. You need to specify widths for inputs. You can try something like...
<div class="navbar navbar-fixed-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
User <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-form">
<button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
<input type="search" class="form-control pull-left" style="width:70%;">
</form>
</div><!--/.nav-collapse -->
</div>
</div>
Demo on Bootply: http://bootply.com/70142
Because your menu is fixed to the top, you can use something like this:
<form class="navbar-form navbar-left"
style="display:inline;
position:absolute;
margin-right: 140px;">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</form>
The display:inline is used that the absolute position is directly next to your left navbar-brand or maybe a nav navbar-nav. The class form-control of bootstrap will use it's 100% width to fill the rest of the navbar with the input field. Because you have got a dropdown on the right side of form define a matching margin to the right, so the element does not overlap.
Example: on plunker
It works with IE and Chrome but unfortunately not on Firefox and Safari. Ideas how to fix this are welcome.
Try this
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a class="brand" href="#">Brand</a></li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
</form>
<ul class="nav pull-right">
<li class="dropdown">
User <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Account</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
I am trying to align few controls in one line using bootstrap class = "form-inline", but it seems it not working fine. What am I doing wrong?
Currently I am getting the result in two lines.I want them to be displayed in one line
The code which I am using is as below
<div class="form-inline">
<i class="icon-list-alt"></i>
<label class="control-label">
Please enter TB Id or TBR Id</label>
<div class="form-search">
<div class="input-append">
<input id="inputValue" type="text" class="span2 search-query" />
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a id="POA" tabindex="-1" href="#">1</a></li>
<li><a id="MOD" tabindex="-1" href="#">2</a></li>
<li><a id="LC" tabindex="-1" href="#">3</a></li>
</ul>
</div>
</div>
</div>
</div>
Check this code, hope it helps:
<div class="form-inline">
<i class="icon-list-alt"></i>
<label class="control-label">
Please enter TB Id or TBR Id</label>
<span class="form-search">
<div class="input-append">
<input id="inputValue" type="text" class="span2 search-query" />
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a id="POA" tabindex="-1" href="#">1</a></li>
<li><a id="MOD" tabindex="-1" href="#">2</a></li>
<li><a id="LC" tabindex="-1" href="#">3</a></li>
</ul>
</div>
</div>
</span>
</div>