Twitter Bootstrap Question posted in

Twitter bootstrap – display bootstrap dropdown-menu to orient the list to the left instead of right

I have an issue with the button dropdown from Bootstrap-Twitter 3.

JSFiddle

HTML

<div class="input-group">
    <input type="text" class="form-control">
    <!-- Split button -->
    <div class="input-group-btn">
     <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

In the JSFiddle above, you can see an input stick with a dropdown button at its right.

The problem is that the list of the dropdown button is displayed in a way that the list is cutted (the viewport should not expand itself, however this is what happens).

Question

How can I tell this element to display the list from the right to the left (reverse of the current behaviour) ?

Tags:

3

Answers


  1. 0

    Try Use :

    class="dropdown-menu pull-right"

    As you can see here : Updated Fiddle

    This will ensure the dropDown menu is pulling to the right, which gives it float:right!important.

    This will ensure it’s not hidden behind.

    EDIT: Rory McCrossan’s answer is the recommended solution for this question

    Login or Signup to reply.
  2. 0

    You can do this by CSS (overwrite the default rule) or you can custom with a new class:

    .dropdown-menu {
  right:0;
  left: auto;
}

    In fact is the same thing this class .pull-right from bootstrap library do:

    CSS

    .pull-right {
  right:0;
  left: auto;
}
    Login or Signup to reply.
  3. 0

    From the documentation:

    By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

    <ul class="dropdown-menu dropdown-menu-right">
    <!-- your li elements... -->
</ul>

    Updated fiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search