jQuery Chosen div falls behind Twitter Bootstrap accordion

Question

I'm using the jQuery Chosen plugin inside a Twitter Bootstrap accordion. The problem that I have is that the dropdown menu of the Chosen plugin appears 'under' the div of the accordion menu. I tried to set the z-index to a higher value, but that didn't do the trick.

I made an example of my problem: http://jsfiddle.net/8BAZY/1/

If you click on the select box you'll see that the menu appears under the div. How can I let the dropdown appear ontop of the accordion div, so I can see all the results?

Answer 1

It's not elegant, but you can do it like this:

#collapseOne {
    overflow: hidden;
}
#collapseOne.in {
    overflow: visible;
}

This will make sure it gets clipped when collapsed, and visible when shown.

Answer 2

More info on this chosen issue is here https://github.com/harvesthq/chosen/issues/86

One solution based on the suggestions given on that page by PilotBob http://jsfiddle.net/8BAZY/6/

$(function() {
    var els = jQuery(".chzn-select");
    els.chosen({no_results_text: "No results matched"});
    els.on("liszt:showing_dropdown", function () {
            $(this).parents("div").css("overflow", "visible");
        });
    els.on("liszt:hiding_dropdown", function () {
            $(this).parents("div").css("overflow", "");
        });
});

Thanks.

Answer 3

Solution posted by Sudhir worked for me except it had one minor issue: When you have more than one choosen control inside the div and you expand other choosen while there is one already expanded, the new one will fall behind the accordion. This is because the first dropdown sets the overflow to hidden after 2nd one is expanded. Here is the fix.

$(function () {
   fixChoosen();
});

function fixChoosen() {
   var els = jQuery(".chosen-select");
   els.on("chosen:showing_dropdown", function () {
      $(this).parents("div").css("overflow", "visible");
   });
   els.on("chosen:hiding_dropdown", function () {
      var $parent = $(this).parents("div");

      // See if we need to reset the overflow or not.
      var noOtherExpanded = $('.chosen-with-drop', $parent).length == 0;
      if (noOtherExpanded)
         $parent.css("overflow", "");
   });
}