Twitter Bootstrap tabs and bootstrap-select overflow issue

Question

I use twitter bootstrap and this plugin for select menu https://developer.snapappointments.com/bootstrap-select/.

I have a problem when I'm trying to apply this select to the content inside tabs.

http://jsfiddle.net/gbGdY/1/ demo to illustrate the problem.

Outside tabs, everything works fine, but inside tab - overflow doesn't work properly.

Also, if I try to override tabs overflow (like this)

.tab-content {
  overflow: visible !important;
}

then I'm getting another problem - menu drops down and expands to the full height.

So, my question is how to avoid this problem, and make select menu works inside tab just like it work outside tabs.

Answer 1

Hope you're still looking for a solution? if you are, you could try this one:

add overflow: hidden to tab-content

<div class="tab-content" style="overflow: hidden">

and add data-container as tab-pane / tab-content

<div class="btn-group bootstrap-select" data-container="tab-pane">

and add / modify the css rules as required

.dropdown-menu {
    height:200px;
}

.tab-content{
    height: 350px; 
    background: green;
    padding: 2%;
}

and it will turn out to be something like this: http://jsfiddle.net/gbGdY/1/

hope this helps! -r

Answer 2

Set the .tab-content to overflow: visible like you did.

Then set:

.dropdown-menu { height:200px; }

Or set it to whatever height you want.