dropdown-menu button's menu renders outside browser window
Created by: inactivist
I'm relatively new to Twitter BS and encountered an odd effect with dropdown buttons. The popup menu renders outside the window/viewport, clipping the popup (and thus rendering it pretty much unusable.) The appearance is very similar to the one described in issue #3107 (closed).
JSFiddle example - screen shot:
Consider the following (admittedly unusual) floating div structure:
<div class="pull-left">
<div class="pull-right">
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
<span>Actions</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li class="divider"></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>
</div>
</div>
Patient: "Doctor, it only hurts when I laugh." Doctor: "Then don't laugh."
I'll admit that I might want to avoid the nested pull-right
/ pull-left
structure, but... is this reasonable behavior from Bootstrap?
I'm using Bootstrap v2.0.3.