Coder Perfect

The Twitter bootstrap dropdown extends beyond the confines of the screen.

Category: html

Tag: , ,

Problem

Here’s my code for implementing a Twitter Bootstrap dropdown menu:

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">a</a></li>
  <li><a href="#">b</a></li>
  <li><a href="#">c</a></li>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

My dropdown sits adjacent to the right edge of the screen, and when I click the dropdown-toggle, the list extends beyond the screen. On the screen, it appears as follows:

What can I do about it?

Asked by pawel

Solution #1

It should be as simple as adding.pull-right to ul.dropdown-menu.

Answered by Ross

Solution #2

Adding.pull-right to dropdown menus has been deprecated since Bootstrap v3.1.0. Instead, ul.dropdown-menu should have a.dropdown-menu-right attribute. Docs

Answered by krzychu

Solution #3

Dropdown-menu-right is used in Bootstrap 4. Here’s an example that works.

http://codeply.com/go/w2MJngNkDQ

Answered by praj

Solution #4

an approach that simply requires CSS changes and does not require any HTML changes

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

It’s especially handy for dynamically generated menus when adding the recommended class dropdown-menu-right to the last element isn’t always possible.

Answered by GiorgosK

Solution #5

Answered by Mohan Dere

Post is based on https://stackoverflow.com/questions/13806802/twitter-bootstrap-dropdown-goes-outside-the-screen