Categories
css html twitter-bootstrap

Dropdown menu inside Bootstrap panel group not completely visible

I am trying to get a dropdown menu to work with a collapsible panel group. The dropdown works fine if I take it out of the .panel-group div. I am using Bootstrap 3.0.3

Non-working js fiddle:
http://jsfiddle.net/E2rqA/

and this is how it should look:
http://jsfiddle.net/ShCaf/

This is because of the following rule applied from bootstrap.css.

.panel-group .panel {
margin-bottom: 0;
overflow: hidden; /*This is the issue*/
border-radius: 4px;
}

You can override the overflow for your own panel. You can add the following rule to make it more specific to your panel.

#sessionaccordion.panel-group .panel {
overflow: visible;
}

Demo