I'm using Bootstrap 2.0.3, with drop-down menus inside divs which are collapsible / expandable. When the drop-down menu overflows the div, they get cut off (but they shouldn't). Jsfiddle to illustrate: http://jsfiddle.net/t3wFK/1/
In Bootstrap 2.0.2 the menu does not get cut off: http://jsfiddle.net/u3wkK/
I found half a workaround by using a css rule as follows:
#stuff.in {
overflow: visible;
}
The 'in' css class gets added by bootstrap whenever a div marked with 'collapse' gets expanded.
Unfortunately this workaround breaks completely in Firefox.
Any ideas? I am considering downgrading to Bootstrap 2.0.2, but that would be painful.
The problem here appears to be that in 2.0.3, Bootstrap applies the .collapse
class to the #stuff
element. In the bootstrap css, there's a style:
.collapse {
overflow: hidden;
}
However, when you expand a .collapse
target, the overflow
property remains hidden
.
Not sure if it's a bug or not (would have to look into it deeper to see if there's any drawbacks to doing this), but modifying the rule for .collapse.in
would work.
.collapse.in {
height: auto; /* this style already exists in bootstrap.css */
overflow: visible; /* this one doesn't. Add it! */
}
If you would prefer not to modify Bootstrap's CSS (which may have unintended side effects as noted in the comments), you can add shown
and hide
event handlers to your #stuff
element to modify the overflow
property:
$('#stuff').on({
shown: function(){
$(this).css('overflow','visible');
},
hide: function(){
$(this).css('overflow','hidden');
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With