Clever Geek Handbook

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.

+3


source to share


1 answer


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

.

Demo: http://plnkr.co/edit/Dfq41N5T4WwUMAJL1NYb?p=preview

+2


source






More articles:


All Articles