How do you make a dropdown control work inside a badge with Twitter Bootstrap? Here's what I'm trying to do:
<ul>
<li>
<span class="badge badge-success">
Badge with dropdown
<span class="dropdown-toggle" data-toggle="dropdown">>>></span>
<ul class="dropdown-menu">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>
</span>
</li>
</ul>
http://jsfiddle.net/HhqJN/
If you click on the greater than symbols at the end of the badge, it should open the dropdown. But because it's inside a badge, the dropdown menu's style looks horrible. If I try to move the actual menu list outside the badge, then the dropdown doesn't work at all. Is there a way to reset or undo the style set for the badge?
Here's my customization...
Hope this works for you...
Demo:- http://jsfiddle.net/HhqJN/4/
HTML:-
<div class="btn-toolbar btn-custom">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle btn-mini" data-toggle="dropdown">Action <span class="caret"></span></button>
<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>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle btn-mini" data-toggle="dropdown">Danger <span class="caret"></span></button>
<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>
</div><!-- /btn-group -->
</div>
Thanks....
Related
I have a scrollable bootstrap nav tab by making the tab-pane css be this:
.tab-pane {
height:300px;
overflow-y:scroll;
}
I have a bootstrap drop down that is configured to have the menu pop up and the menu is getting cut off. My dropdown code is:
<div class="btn-group dropup">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</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>
Wondering if there is a solution to this.
http://jsfiddle.net/jqntuxvf/3/
You can add additional padding-top in tab-pane class so the drop down menu have some space
Here is edited fiddle from yours http://jsfiddle.net/jqntuxvf/13/
I'm having a problem with the text-center class of bootstrap not working, here is it.
I have a div that contains several list and other tags, but when I apply the text-center class to make this center on the screen it does nothing, this applies also in a div that contains divs in shapes, here is my code:
<div class="col-md-12 options-bar text-center">
<ul class="nav nav-pills">
<li class="normal-li">Ordenar por: </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Status <span class="caret"></span>
</a>
<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>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Clientes <span class="caret"></span>
</a>
<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>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Fecha <span class="caret"></span>
</a>
<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>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Productos <span class="caret"></span>
</a>
<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>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
AsignaciĆ³n <span class="caret"></span>
</a>
<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>
<li class="normal-li">Ver por: </li>
<li><input type="radio"><label style="color: rgb(46, 116, 241 );">Solicitud</label></li>
<li><input type="radio"><label style="color: rgb(46, 116, 241 );">Producto</label></li>
<li id="clock"><span class="glyphicon glyphicon-time"></span></li>
<li>
<input type="text" class="form-control" placeholder="Buscar solicitudes">
</li>
</ul>
</div>
As you can see my div with class options-bar is the one that contains the rest, but the class text-center does nothing.
Here is my css stylesheet for options-bar:
.options-bar {
line-height: 50px;
width: 100%;
}
You may use this for centering div's. Add the below code to the div that you want to center.
.centered {
margin: 0 auto;
}
Note: Usually div's occupy entire width(since its a block element). Make sure that the div which you want to center has width lesser than the screen width. Otherwise you may not see any difference.
You can set the .nav.nav-pills li items to flex-grow: 1; which will cause all the list items to expand equally to fill the space. See this fiddle for an example. I also added a snippet below, but it only looks right in full-screen.
.options-bar {
line-height: 50px;
width: 100%;
}
.nav.nav-pills li {
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="col-md-12 options-bar text-center">
<ul class="nav nav-pills">
<li class="normal-li">Ordenar por: </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Status <span class="caret"></span>
</a>
<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>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Clientes <span class="caret"></span>
</a>
<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>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Fecha <span class="caret"></span>
</a>
<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>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Productos <span class="caret"></span>
</a>
<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>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
AsignaciĆ³n <span class="caret"></span>
</a>
<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>
<li class="normal-li">Ver por: </li>
<li>
<input type="radio">
<label style="color: rgb(46, 116, 241 );">Solicitud</label>
</li>
<li>
<input type="radio">
<label style="color: rgb(46, 116, 241 );">Producto</label>
</li>
<li id="clock"><span class="glyphicon glyphicon-time"></span></li>
<li>
<input type="text" class="form-control" placeholder="Buscar solicitudes">
</li>
</ul>
</div>
Try this css class in your divs:
.vertCenter {
display: flex;
justify-content: center;
align-items: center;
I need to have 3 dropdown buttons inline with each other. I use btn-group, but this breaks the layout of one of the dropdowns. The layout of the dropdown content needs to be wide, but using btn-group or display:inline-block forces it to be the standard, narrow dropdown which breaks the layout of my content.
JS Fiddle
Note how the first dropdown is wide. If you change the parent div to btn-group or display:inline-block, the content shrinks and becomes narrow. I need to keep the wide dropdown, and at the same time make all the buttons appear on one row.
How can I do this?
You'll have to play around with the functionality some so they big box isn't showing the same time as the narrow ones, but your problem is that by setting the .dropdown class to position:relative you're limiting the width of it's child elements. By removing this and changing the top position of your children, it should look the way you want it to.
.dropup, .dropdown {
position: inherit;
}
.dropdown-menu {
top:40px;
}
jsfiddle-link
You may try with the following html
<div class="row">
<div class="col-md-6 btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100%;">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Some large content hereSome large content hereSome large content hereSome large content hereSome large content here
</a></li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="col-md-3 btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100%;">
Action <span class="caret"></span>
</button>
<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>
</div>
<div class="col-md-3 btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100%;">
Action <span class="caret"></span>
</button>
<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>
</div>
</div>
I am trying to add an inline bootstrap dropdown, text field, dropdown and then a button. The problem I have is that the second dropdown before the green button still as a radius on the top right and bottom corners, as seen in the screen shot below:
My question is, is there a way to do this just using the bootstrap mark up, or will I just have to target the second dropdown with custom CSS? The code I have so far is below:
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">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><!-- /btn-group -->
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">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>
<button type="button" class="btn btn-success">Go</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
Use this:
.dropdown-menu:nth-child(2){border-radius:0;}
I have some things in a <ul>, but I need the last one to be all the way to the right. How do I put it there? (I need the dropdown to move to the right.)
<ul class="nav navbar-nav">
<li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></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>
Split it into two navbars: one that is on the left and one that is floated right with pull-right:
<ul class="nav navbar-nav">
<li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <b class="caret"></b>
</a>
<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>
Check out the example from Bootstrap's example site: http://examples.getbootstrap.com/navbar-fixed-top/index.html
<div class="container">
<ul class="nav navbar-nav">
<li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
<!--// add a class of .pull-right //-->
<li class="dropdown pull-right ">
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>
</div>
DEMO
relatively new to HTMl and CSS, but I solved a similar problem without having to make a duplicate menu bar. Simply 'float: right;' in the tage you want to appear on the right. (Best to have them as the last elements to maintain logical order.)
for example
Action
becomes
Action
Repeat this for any elements you want on the right hand side. It will overwrite the defined float:left default.
Dropdown
Action
Another action
Something else here
Nav header
Separated link
One more separated link