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/
Related
I'm trying to create a split dropdown button for my Django website and I'm using Bootstrap 3. Following is my code for the same:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li>
<div class="btn-group">
<button type="button" class="btn btn-default navbar-btn">Action</button>
<button type="button" data-toggle="dropdown" class="btn btn-default navbar-btn dropdown-toggle"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</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>
</li>
But I'm getting this kind of weird output.
I'm stuck at this problem from an hour. What am I doing wrong here? Why does the split arrow is not showing properly?
I think your other CSS conflict, I have added demo check now
Your code is true
<div class="btn-group">
<button type="button" class="btn btn-default navbar-btn">Action</button>
<button type="button" data-toggle="dropdown" class="btn btn-default navbar-btn dropdown-toggle"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</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>
https://jsfiddle.net/lalji1051/5yoe2uz1/2/
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 have this code
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</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>
which looks like
I want to add icon like cog insteaqd of Text like this
I have tried this
<button type="button" class="glyphicon glyphicon-cog"></button>
buts not working
For a button, the icon needs to go inside the button as the button's contents, so instead of <button type="button" class="glyphicon glyphicon-cog"></button>
it should be
<button type="button" class="btn">
<span class="glyphicon glyphicon-cog"></span>
</button>
Edit: to add the caret in Bootstrap, you use <span class="caret"></span>
So the end result to get a button with a cog and dropdown caret is:
<button type="button" class="btn">
<span class="glyphicon glyphicon-cog"></span><span class="caret"></span>
</button>
When I paste that code into Bootstrap's homepage, I get this:
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-cog"></span></button>
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</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>
You can use this code
Just add this span tag
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
See this DEMO
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;}
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....