CSS

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:

David Carr

David Carr

For the past 12 years, I’ve been developing applications for the web using mostly PHP. I do this for a living and love what I do as every day there is something new and exciting to learn.

In my spare time, the web development community is a big part of my life. Whether managing online programming groups and blogs or attending a conference, I find keeping involved helps me stay up to date. This is also my chance to give back to the community that helped me get started, a place I am proud to be apart of.

Besides programming I love spending time with friends and family and can often be found together going out catching the latest movie, staying in playing games on the sofa or planning a trip to someplace I’ve never been before.