Black Friday sale is now on! 50% off Laravel: The Modular Way. Learn more

Stop Bootstrap drop menu's being cut off in responsive tables

David Carr

CSS

    Bootstrap’s dropdown menu’s a great for display items in a tidy way but suffer for being cut off when on mobiles due to the class table-responsive the dropdown gets cut off from the overflow is set to hidden.

    Such as like this image:

    Thanks to leocaseiro for this handy css solution:

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

    Using this css stops the issue on mobile devices instead the dropdown takes up the content in the table cell:

    Laravel Modules Book by David Carr

    Help support the blog so that I can continue creating new content!

    Subscribe to my newsletter

    Subscribe and get my books and product announcements.

    © 2009 - 2022 DC Blog. All code MIT license. All rights reserved.