I'm trying to display a text input inline with a dropdown button. I can't figure out how to do this though. Here's the HTML I've tried (I've put all of it on a single line with no results):
<div class="input-append">
<input type="text" placeholder="foo" class="input-mini">
<div class="btn-group">
<a id="amount_type" class="btn dropdown-toggle" data-toggle="dropdown" href="#">10<span class="caret"></span></a>
<ul id="amount_type_options" class="dropdown-menu">
<li class="selected"><a href="#">10</a></li>
<li><a href="#">100</a></li>
<li><a href="#">1000</a></li>
</ul>
</div>
</div>
Is this possible?
Thank you
Currently there is a default implementation of input+dropdown combo in the documentation here (search for "Button dropdowns"). I leave the original solution for the record and for those who cannot use solution now included in the documentation.
Yes, it is possible. As a matter of fact, there is one example in the Twitter Bootstrap documentation (follow the link and search "Examples" for dropdown buttons):
<div class="btn-group">
<a class="btn btn-primary" href="#">
<i class="icon-user icon-white"></i> User
</a>
<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>
If enclosed within text, it can look like this (with text on the button changed, nothing else):
EDIT:
If you are trying to achieve <input>
with appended dropdown menu as in the dropdown buttons, then this is one of the solutions:
btn-group
class to the element that has input-append
class,dropdown-toggle
and dropdown-menu
at the end of the element with class input-append
,.input-append .btn.dropdown-menu
so it does not have float: left
(otherwise it will get into next line).The resulting code may look like this:
<div class="input-append btn-group">
<input class="span2" id="appendedInputButton" size="16" type="text">
<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>
with a little support from this style override:
.input-append .btn.dropdown-toggle {
float: none;
}
and give you the exact same result as this:
EDIT 2: Updated the CSS selector (was .dropdown-menu
, is .dropdown-toggle
).