Question

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.

Answer 1

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');
    }
});