.tab-content overflow clips dropdowns

[yazdog8]

I'm running the latest version of bootstrap (2.0.3) and there appears to be a clipping problem when I place a dropdown into tabbed content. I see that this was resolved in version 2.0.2 (#2079) where the overflow:hidden was changed to display: table.

.tab-content {
display: table; // prevent content from running below tabs
width: 100%;
}

Now, in 2.0.3 the scrolling and cut is back, is it possible because the navs.less reads:

.tab-content {
overflow: auto; // prevent content from running below tabs
}

At any rate, this problem appears to be back. I rolled back the tab-content to display: table and that seems to work for now.

[grokys]

Can reproduce what I think is the same problem here: http://jsfiddle.net/GGMWX/3/

[joelmoss]

I'm having the same issue here.

[srpouyet]

I'm also having this issue, using the workaround mentioned by @yazdog8 for the time being

[mdo]

You can use either inline-block, table, or table-cell to fix this, but be aware that it changes the width of the .tab-content from 100% to whatever the width of the content is. This is the reason for overflow auto and not something we can change at this time.

[pcopley]

I have the following work-around for this. I am using Chosen drop-down boxes so the exact markup may vary slightly but this works for my purposes:

.tab-content {
    display: inline-block;
    overflow: visible;
    max-width: 600px; /* Specific to my needs, .tab-content is 
                         pushed below .tabs-left without this */
}

[marcusg]

I'm facing the same problem... is there a way to fix this without using a fixed width?

[pcopley]

You can try

.tab-content {
    display: table;
}

as is stated in this thread. I don't know of any work-arounds except that and my max-width solution above.