Bind bootstrap dropdown to another element
I would like to choose which item the bootstrap unload is unloaded with when it opens. Is it possible? I am open to programmatic programming with AngularJS or JavaScript.
I currently have a textbox with a dropdown of buttons. Similar to this:
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu" role="menu">
<li><a href="#">Some Action</a></li>
</ul>
</div>
</div>
I want the dropdown to line up so that it drops out of the textbox instead of a button. I can't just move it n pixels because the width of the input field is relative to the screen size.
In your case, you can fix this by applying another class to the .input-group-btn
div:
<div class="input-group-btn input-group-btn-static">
<button type="button" class="btn btn-default" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu" role="menu" id="drop">
<li><a href="#">Some Action</a></li>
</ul>
</div>
CSS
.input-group-btn-static {
position: static;
}
The idea is to make the dropdown relative <div class="input-group"></div>
instead of div.input-group-btn
.