CODEWITHSUNDEEP
jquerycsstwitter-bootstrapoverflow
chris6953
chris6953

Reputation: 977

bootstrap dropdown in collapse,

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.

Upvotes: 15

Views: 14345

Answers (4)

Akshay
Akshay

Reputation: 1354

I was doing a lot of research on this found a solution to the problem by adding this line of code to the css, i found this at https://github.com/twitter/bootstrap/pull/2423#issuecomment-13132202

.collapse.in[style="height: auto;"] {overflow: visible;}

This did the trick for me hope this works for you

Upvotes: 1

Jaime Martinez
Jaime Martinez

Reputation: 41

I've tried your workaround with Bootstrap 2.1.1 and it breaks in Firefox 16, working just for the first time then not opening at all.

In my case, the problem was only the first time a visitor opened the collapsible element and inline fixed height was applied. The second time height was set to auto.

So I've found that the problem relies on the html code for nav-collapse element wich doesn't have a state declared at first:

Here's the code at first:

<div class="nav-collapse">

Then after expanding first time bootstrap assigns fixed height:

<div class="nav-collapse in collapse" style="height: 286px;">

And after closing first time height back to 0:

<div class="nav-collapse collapse" style="height: 0px;">

Opening second time and it works fine with auto height:

<div class="nav-collapse collapse" style="height: auto;">

So class .collapse is needed for the javascript to set automatic height:

<div class="nav-collapse collapse">

It took me a while to figure out!

Upvotes: 4

jackwanders
jackwanders

Reputation: 16020

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

Upvotes: 18

Kyle Macey
Kyle Macey

Reputation: 8154

Try using the !important flag, as it seems in Firefox, properties are read with different priority for some reason.

http://jsfiddle.net/t3wFK/2/

.in {
    overflow: visible !important;
}

Upvotes: 1

Related Questions