CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Captain Rib
Captain Rib

Reputation: 295

Bootstrap dropdown inside a table doesn't work with .table-responsive

Here is the link to the live example. http://www.codeply.com/go/uBnL1bBs6v

From which you can see, the dropdown gets cutoff when I apply a layer <div calss="table-responsive"></div>to wrap the table.

If you remove the wrapper <div class="table-responsive"></div>, the dropdown works fine.

I was wondering what would be the problem and how do I fix it? I added table-responsive class because I need the function to scroll between columns since I have a lot columns.

Any help would be appreciated.

Upvotes: 2

Views: 7642

Answers (5)

Vladyslav
Vladyslav

Reputation: 21

Maybe this will help someone. Please replace table-responsive class with table-active!

Upvotes: 0

serpong
serpong

Reputation: 175

Use this css code

.table-responsive>table .dropdown{position:static;}
.table-responsive>table .dropdown>.dropdown-menu{left:auto !important;top:auto !important;}

Upvotes: 7

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

The dropdown is hiding under the tr. You got to set this position:relative to the dropdown, that is the ul element. I have added this CSS rule to your codeply. Working Demo

table.table ul.dropdown-menu{
    position:relative;
    float:none;
    max-width:160px;
}

Add this in the CSS rule and you see its fixed.

Note: in your demo the body height is very small so the drop down might still be seen as hidden. Give some height to your body (for demo).

Add this

body{
    height:500px;
}

Upvotes: 3

d_z90
d_z90

Reputation: 1263

Apparently the table-responsive class is creating a conflict with the class table. I will research better ways to solve it, but for the moment you can simply apply height: 200px to table to solve the issue.

Upvotes: 0

alexhenkel
alexhenkel

Reputation: 602

Just add to the table-responsive class overflow: visible

Upvotes: -1

Related Questions