CODEWITHSUNDEEP
twitter-bootstrap
Scott
Scott

Reputation: 6736

Twitter Bootstrap align dropdown from the bottom

I have a bootstrap table displaying data with a dynamic amount of rows. The last <td> contains a trigger that when clicked, brings up a bootstrap dropdown. The problem is that when the table's contents grow too large, activating that dropdown will display it beneath the clickable trigger, no matter where on the screen it is. If the trigger is at the very bottom of the page, when clicked the dropdown will increase the page height, and the user will have to scroll down again to see the rest of the dropdown.

This also has other implications, such as it may have that ever so slight (yet annoying) effect where the viewport's page height will trigger the display of the scrollbar, decreasing the width of the page just enough to be noticeable, but only when the dropdown is visible.

Is there any way with twitter bootstrap to have the dropdown recognize that it will in fact extend vertically beyond the viewport, and if it will, render it aligned vertically upward instead? A sort of dynamic class="dropdown pull-up" where bootstrap is smart enough to know to align only if necessary to not have the dropdown display beyond the bottom of the viewport?

Upvotes: 2

Views: 3802

Answers (1)

Jeffrey Nicholson Carr&#233;
Jeffrey Nicholson Carr&#233;

Reputation: 3040

Yes Dropup menus ( see the drop up exemple in this section)

Make sure you are using the latest version

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Upvotes: 7

Related Questions