Twitter Bootstrap Accordion and button dropdown overflow issue

Question

I'm using Bootstrap for a section of my website. I mix accordion with a dropdown button. The problem comes when the button is on the bottom, the drop-down is hidden since the .accordion-body overflow is set to hidden.

You can view jsfiddle here: http://jsfiddle.net/DBQU7/6/

So I did what you would expect, tried to do overflow-y:visible. But then you can see the result here, it doesn't work: (You can maybe also notice that the drop-down is inside the div, which creates a scroll bar inside the div instead of just showing up.

http://jsfiddle.net/DBQU7/5/

I saw this question that was similar: Twiiter Bootstrap (Button Dropdown) + Div Fixed

But it doesn't fix the problem as I mentioned above.

So the question is, how can I just make the dropdown show up normally.

Thanks.

---

The only solution I have found so far (and I would be happy to be proved wrong) was to add a CSS property that made the overflow visible when it was open and then through a JS script make it toggle between visible and hidden...not ideal, but nothing better so far.

-- Edited -- It actually doesn't work very well and doesn't seem to be a viable solution.

Answer 1

Original Idea

You were very close with your solution. This is it:

.accordion-body.in { overflow:visible; } 

The .in class is added when opened, and thus only sets visibility when open.

See the example fiddle.

Update That May Help with Chrome Bug

The bug mg1075 notes below can be solved by a slight change to the code above, like so:

.accordion-body.in:hover { overflow:visible; } 

This essentially prevents the overflow from occurring before the animation is complete. It works well, except that when you click your down button to open the dropdown, and then exit the .accordion-body it will crop off the dropdown again, but only until you mouseover the dropdown area again. Some might consider the behavior preferable.

See the fiddle with the update code.

Answer 2

Another solution which seems to work in every browsers :

.accordion-body[class*="in collapse"]{ overflow:visible;}