dropdown menu in a .table-responsive
Created by: SoftHai
If you have an Dropdown (e.g. from a Button) inside a table-respnsive object than the dropdown is not display correct on small devices (or small browser Windows).
here the example:
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th style="width: 1px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
<span class='glyphicon glyphicon-plus'></span> <span class="caret"></span>
</button>
<ul class="dropdown-menu stay-open pull-right" role="menu" style="padding: 15px; min-width: 300px;">
<li>First menu item</li>
<li>Second menu item</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Name 2</td>
<td>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
<span class='glyphicon glyphicon-plus'></span> <span class="caret"></span>
</button>
<ul class="dropdown-menu stay-open pull-right" role="menu" style="padding: 15px; min-width: 300px;">
<li>First menu item</li>
<li>Second menu item</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
If you have a big screen, all looks good. If you make the screen very small than the dropdown is not displayed correctly:
By the way: Tested on Chrome 29 and Bootstrap 3