Bootstrap button dropdown in tab pane causing overflow

Question

I'm using Bootstrap and have a form embedded in tab panes that contains button dropdowns. Sometimes the amount of items in the dropdowns overflows the height of the tab pane. I can always increase the min-height of the tab pane, but this solution is hackish. I have an example jsfiddle here:

http://jsfiddle.net/Sudp7/1/

In it, you can see how the dropdown gets clipped at the bottom of the tab pane. Is there a way to make the dropdown menu overflow the height of its parent container? I have tried playing with the z-index and overflow-y properties to no avail. Any tips would be much appreciated.

Thanks, Richard

Answer 1

If changing overflow is an option for you, then the right selector is .tab-content

.tab-content {
    overflow: visible;
}