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>
    <ul class="dropdown-menu dropdown-menu" role="menu">
      <li><a href="#">Some Action</a></li>


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.


source to share

1 answer

In your case, you can fix this by applying another class to the .input-group-btn


<div class="input-group-btn input-group-btn-static">
    <button type="button" class="btn btn-default" data-toggle="dropdown">
        <span class="caret"></span>
    <ul class="dropdown-menu dropdown-menu" role="menu" id="drop">
        <li><a href="#">Some Action</a></li>



.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





All Articles