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