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

Another solution which seems to work in every browsers :

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

Answer 2

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.

So:

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

and:

.ui-jqgrid tr.jqgrow td.actionTD {overflow: visible;}

Answer 3

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="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
  </ul>
</div>

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.

Answer 4

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.

http://jsfiddle.net/ecSH4/

<div class="btn-group dropup">

---

UPDATE

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

http://jsfiddle.net/ecSH4/52/

$(".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")) {
            $myDropDownMenu.hide();
        } else {
            $myDropDownMenu.show();
        }
    }

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

});

$(document).click(function() {
   $(".collapse").css("overflow", "hidden");
   $(".dropdown-menu").hide();
});​