CSS

David Carr

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

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:

Domains are often purchased from multiple providers, keeping track of where a domain is and its DNS settings can be tricky. Domain Mapper solves this by listing all your domains in one place. View your DNS settings and receive reminders to renew your domains. Try it today.

Support my work by donating with PayPal.

Subscribe to my newsletter

Subscribe and get my books and product announcements.

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