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 .

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

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

Answer 3

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
        that.$element[method]('fully').trigger(completeEvent)
      }

in boostrap.css, add this class:

.collapse.in.fully
{
    overflow:visible;
}

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

Answer 4

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

#collapseThree {
 overflow: visible;   
}​

http://jsfiddle.net/DBQU7/6/

Answer 5

add an id to the dropdown toggle link.

example:

id="actionButton"

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;
        $(this).dropdown();
        if($(this).parent().hasClass("open")){        
            $(this).parent().parent().parent().css("height","");
            $(this).parent().css("margin-bottom","9px");
        } else {
            $(this).parent().parent().parent().height(actionButtonAccordionBodyExtended);
            $(this).parent().css("margin-bottom",actionButtonDropdownMenuHeight);
        }
    }

function actionButtonContract() {
    $("#actionButton").parent().parent().parent().css("height","");
    $("#actionButton").parent().css("margin-bottom","9px");

}                           
$("#actionButton").click(actionButtonExpand);
$(".accordion-toggle").click(actionButtonContract);

http://jsfiddle.net/baptme/6yAnc/

Answer 6

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.