Dropdown menu inside Bootstrap panel group not completely visible

Question

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/

Answer 1

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