Take the 2-minute tour ×

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.


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.


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.

share|improve this question
add comment

10 Answers

up vote 35 down vote accepted

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.

share|improve this answer
+1, and I've upvoted. One issue, though, is the css3 transition now results in a brief overlay of two text layers. –  mg1075 Jun 22 '12 at 21:41
@mg1075--I'm not seeing the delay you refer to. –  ScottS Jun 23 '12 at 2:50
in Chrome, I'm seeing a brief overlay of content when a header is clicked and visible content transitions from one .collapse to another. –  mg1075 Jun 23 '12 at 3:13
@mg1075--okay. I can confirm that. It's almost like FF sets .in after the fact, and Chrome before the full transition. That would probably take some tweaking of the script to resolve (if one felt it was necessary). –  ScottS Jun 23 '12 at 13:32
@mg1075--I added an update with a "tweak" of the code that helps resolve the animation issue in Chrome. –  ScottS Jun 23 '12 at 17:02
show 4 more comments

Another solution which seems to work in every browsers :

.accordion-body[class*="in collapse"]{ overflow:visible;}
share|improve this answer
add comment

I don't know if you would find this an acceptable alternative solution, or how many items your dropdown would have, but you could use the "dropup" class, so as to make the dropdown menu drop UP instead of down.


<div class="btn-group dropup">


Rather kludgy at this point, yet in a limited sense, it "works".


$(".special-drop, .special-drop .caret").click(function() {
    var $myCollapsable = $(this).closest(".collapse"),
        $myDropDown = $(this).closest(".dropdown"),
        $myDropDownMenu = $(this).next(".dropdown-menu");

    function toggleDropMenu() {
        if ($myDropDown.hasClass("open")) {
        } else {

    if ($myCollapsable.css("overflow") === "hidden") {
        $myCollapsable.css("overflow", "visible");
    } else {
        $myCollapsable.css("overflow", "hidden");


$(document).click(function() {
   $(".collapse").css("overflow", "hidden");
share|improve this answer
mg1075 - Thanks for that. I thought about it but sometimes the button is on top as well...ha. So then it would be the same problem. –  denislexic Jun 9 '12 at 12:33
@denislexic - added another approach to tackle the issue. –  mg1075 Jun 21 '12 at 1:23
add comment

Set overflow: visible when the menu is open (demo):

$('html').on('click', function() {
    setTimeout(function() {
        $('[data-toggle="dropdown"]').closest('.collapse').css('overflow', '');
    }, 0);

$('body').on('click', '[data-toggle="dropdown"]', function() {
    var parent = $(this).parent(), collapse = parent.closest('.collapse');
    setTimeout(function() {
        collapse.css('overflow', parent.hasClass('open') ? 'visible' : '');
    }, 0);

There seems to be a redraw issue in Chrome (tested with Chrome 19 on Linux) if we set overflow directly. setTimeout() works around this issue.

share|improve this answer
- this seems the best, in my view. –  mg1075 Jun 22 '12 at 21:50
add comment

add an id to the dropdown toggle link.



and with jQuery

function actionButtonExpand() {
    var actionButtonDropdownMenuHeight=$(this).parent().children(".dropdown-menu").height()+19;
    var actionButtonAccordionBodyHeight = $(this).parent().parent().parent().height();
    var actionButtonAccordionBodyExtended = actionButtonDropdownMenuHeight+actionButtonAccordionBodyHeight;
        } else {

function actionButtonContract() {



share|improve this answer
add comment

So here's a partial solution. This does make the dropdown go upward on purpose. Making it a dropup.

Here's the CSS rule to add:

.btn-group.open-upward.open ul.dropdown-menu {
    top: auto;
    bottom: 100%;

So the class to add is open-upward

<div class="btn-group open-upward">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="caret"></span>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>

I say partial because once you add the class, it will go upward. You'd have to remove the class to reverse it back to the default behavior.

share|improve this answer
- bootstrap already has the "dropup" class as part of it's base css. (See last part of documentation for Button dropdown menus - twitter.github.com/bootstrap/components.html#buttonDropdowns.) –  mg1075 Jun 22 '12 at 23:42
Hah! Well, shut my mouth. Thanks for pointing that out. –  artlung Jun 23 '12 at 5:22
add comment

I know I'm seven months late to this party, but maybe someone else will find this helpful.

The cleanest solution I've found to this problem is to use the Bootstrap event handlers on the accordion. It's still kind of kludgy, but IMO it's less hackish than the accepted answer by ScottS (which I think would be better if not for the behavior in Chrome).

$(document).ready(function() {
  $('.accordion-body').on('shown', function() {
    $(this).css('overflow', 'visible');
  $('.accordion-body').on('hide', function() {
    $(this).css('overflow', 'hidden');
share|improve this answer
add comment

This is all you should need to add to make the dropdown menu show:

#collapseThree {
 overflow: visible;   


share|improve this answer
add comment

This is the first result for this issue in Google, so I'm going to repost this here on behalf of the bootstrap community. According to the bootstrap team, this problem should be fixed in 3.0; below is the recommended interim solution:

In boostrap.js, alter the transition function:

, complete = function () {
        if (startEvent.type == 'show') that.reset()
        that.transitioning = 0

in boostrap.css, add this class:


I've tested this in IE8, 9, and 10, FF 11 & 12. Those are all the browsers allowed on our network, but if it functions in IE8 and FF11, chances are good it'll work everywhere. I had problems with the accepted solution in FF11.

source: twitter github issue #3601

share|improve this answer
add comment

If you have found your way here looking for help with getting the Bootstrap button dropdown to work inside of jqgrid (from the linked question), the answer turns out to be dead simple. First, in the colModel entry for your button column, set a css class using the 'classes' attribute, then add a line to your css file to make the style for that class overflow: visible. As a bonus, if you set title: false in the colModel entry, you will get rid of the tooltip hover on your button.


    {name:"Action", index:"RecID", classes:"actionTD", title:false, label:"Action", width: 80, fixed: true, sortable:false, align: 'center', formatter: 'actionFormatter'}


.ui-jqgrid tr.jqgrow td.actionTD {overflow: visible;}
share|improve this answer
add comment

Your Answer


