Full Width Split Dropdown Button in Twitter Bootstrap
Solution 1
Wrap the dropdown-lead in a container:
(Note: This example is for Bootstrap 2.x)
.dropdown-lead {
width: 100%;
}
.leadcontainer {
left: 0;
position: absolute;
right: 30px;
}
.dropdown-toggle {
width: 30px;
float: right;
box-sizing: border-box;
}
.fillsplit {
position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<button class="btn btn-block btn-primary" type="button">Block level button</button>
<div class="btn-group btn-block fillsplit">
<div class="leadcontainer">
<a class="btn btn-primary dropdown-lead" href="#"><i class="icon-user icon-white"></i> User</a>
</div>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a>
</li>
<li><a href="#"><i class="icon-trash"></i> Delete</a>
</li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a>
</li>
</ul>
<div>
</div>
Solution 2
I was looking for the same kind of behavior and found this flexbox solution: http://codepen.io/ibanez182/pen/MwZwJp
It's an elegant implementation which makes use of the flex-grow
property.
Just add the .btn-flex
class to the .btn-group
in your HTML. This is all the CSS you need:
.btn-flex {
display: flex;
align-items: stretch;
align-content: stretch;
}
.btn-flex .btn:first-child {
flex-grow: 1;
}
Credit goes to the author of the pen: Nicola Pressi
Solution 3
If you add the class btn-block to the .btn-group element and give the dropdownbutton elements % widths, that'd do the trick.
.dropdown-lead{
width: 96%;
box-sizing: border-box;
}
.dropdown-toggle{
width: 4%;
box-sizing: border-box;
}
Here's an example: http://jsfiddle.net/eBJGW/5/
Related videos on Youtube
Moshe Katz
#SOreadytohelp I am currently a Computer Science graduate student (Ph. D. seeking) at the University of Maryland. I do a lot of programming (primarily web application development) for small businesses and nonprofits. In school, I focus mostly on security and context-aware systems, and I have also worked on counter-terrorism applications. You can find me most days in PHP and/or C#, but increasingly in JavaScript with a focus on Rich Internet Application areas (knockout.js, durandal, breeze.js, etc) and WebRTC.
Updated on September 16, 2022Comments
-
Moshe Katz over 1 year
I have a place on my site which is using a bunch of
button
elements styled withbtn-block
(example from the Twitter Bootstrap Docs). I now want to switch some of them to split buttons (example), but I can't seem to get the split buttons and the normal buttons to be the same length.I have experimented with all kinds of things, but I can't seem to find a way to do this. Has anyone ever managed to do it? Keep in mind that I do not want to hard-code the width of any elements if I don't have to. (Note that this includes not using hard-coded percentages either.) If it is absolutely necessary, I am OK with defining a width for the toggle part of the button (because I know there will only be a single arrow character in there) but want to specify as few "magic numbers" as possible in order to keep the code maintainable in the future.
-
Moshe Katz about 11 yearsThis solution won't work for me. The toggle button should be a constant size, not a small percentage - when you make the window narrower, it gets scroll bars because the arrow character is wider than the 4% box. When you make the window wider, the 4% box is way too big. I could get around this with responsive styles, but I'm really looking for a solution that works without having to fix the widths, or at a minimum to fix the width of the toggle and have the main button will the space.
-
Moshe Katz about 11 yearssorry for taking so long to reply. Yes, this does what I need. I wish that there was a solution with nicer-looking code, but I doubt that's going to happen.
-
Moshe Katz over 7 yearsI'll have to check this out. Flexbox was not yet supported widely enough in 2013 when I first asked the question.