dropdown menu in a .table-responsive

See original GitHub issue

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

Issue Analytics

State:
Created 10 years ago
Comments:52 (6 by maintainers)

Top GitHub Comments

64reactions

kaystrobachcommented, May 25, 2015

@leocaseiro for me the following gave a useable result:

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

It includes the dropdown inside the table for mobile devices and makes is simply overflow on desktop devices

47reactions

simon21587commented, Jan 24, 2017

@baltazarqc & @llins, great work! Some more improvments:

$('.table-responsive').on('shown.bs.dropdown', function (e) {
    var t = $(this), 
        m = $(e.target).find('.dropdown-menu'),
        tb = t.offset().top + t.height(),
        mb = m.offset().top + m.outerHeight(true),
        d = 20; // Space for shadow + scrollbar.   
    if (t[0].scrollWidth > t.innerWidth()) {
        if (mb + d > tb) {
            t.css('padding-bottom', ((mb + d) - tb)); 
        }
    } else {
        t.css('overflow', 'visible');
    }
}).on('hidden.bs.dropdown', function () {
    $(this).css({'padding-bottom': '', 'overflow': ''});
});

Top Results From Across the Web

Bootstrap button drop-down inside responsive table not visible ...

My <tbody> had a position: relative; . The dropdown-menu has a position: absolute; , but kept "relative" to the tbody, which caused the...

Bootstrap Dropdown overlay table cell on Codeply

It's not z-index! use overflow to get a dropdown menu to overlay a table cell Codeply example. ... <div class="table-responsive">. <table class="table ......

Bootstrap table responsive with btn dropdown-menu wrapping ...

This bootstrap table contains some stock product in ecommerce to buy so displaying add to cart dropdown in each cells . Dropdown menu...

Dropdown In Bootstrap Table Responsive Not Visible ReactJS

Create dropdown-menu appear perfectly on responsive bootstrap tables using ReactJS. I made a method that may not look good but can solve the ......

Responsive Table + Dropdown • REPL • Svelte

DropdownItem,. 7. DropdownMenu,. 8. DropdownToggle. 9. } from 'sveltestrap';. 10. 11. let isOpen = false;. 12. </script>. 13. . 14. <Table responsive>.