Bootstrap tab button pop-up button overflowing

Question

I use Bootstrap and have a form embedded in the tab bar containing dropdown menus. Sometimes the number of items in the drop-down lists overflows the height of the tab bar. I can always increase the minimum height of the tab bar, but this solution is hacky. I have a jsfiddle example here:

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

In it, you can see how the drop-down menu is cropped at the bottom of the tab bar. Is there a way to make the dropdown menu overflow the height of my parent container? I tried playing with z-index and overflow-y parameters to no avail. Any advice would be highly appreciated.

Thanks Richard

Answer 1

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

 .tab-content { overflow: visible; }