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;}
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 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 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 a problem where I need to align several dropdowns horizontally. I have tried with pure table tags and it works but I suspect it is bad practice. Here is a working fiddle http://jsfiddle.net/1440c8a6/5/
Here is HTML code:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="pull-left">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</div>
<div class="pull-right">
<a class="btn btn-warning btn-sm" href="#" role="button">button1</a>
<a class="btn btn-success btn-sm" href="#" role="button">button2</a>
</div>
<br />
<br />
</div>
</div>
</div>
As you can see I am trying to align dropdowns in left part as buttons in right part:
I have tried with this structure but not sure if this is good or bad:
<table>
<tr>
<td>first div here</td>
<td>second div here</td>
<tr>
</table>
Set display:inline-block to .dropdown
CSS
.dropdown{
display: inline-block;
}
DEMO HERE
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....