CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstraptwitter-bootstrap-3
adam0101
adam0101

Reputation: 31055

Attach bootstrap dropdown to different element

I'd like to choose which element my bootstrap dropdown aligns with when it is opened. Is this possible? I'm open to doing it programmatically with AngularJS or JavaScript.

Currently I have a textbox with a button dropdown appended to it. 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'd like the dropdown to align so it drops down from the text box instead of the button. I can't just move it over n pixels because the input box's width is relative to the screen size.

Upvotes: 3

Views: 2050

Answers (1)

dfsq
dfsq

Reputation: 193291

In your case you can fix it by applying one more class to .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 dropdown position relatively to <div class="input-group"></div> instead of div.input-group-btn.

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

Upvotes: 2

Related Questions