jQuery Chosen div falls behind Twitter Bootstrap accordion

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.

The problem is because .collapse has overflow: hidden. Obviously absolutly positioned chosen dropdown will be clipped. – dfsq 2 days ago

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", "");
   });
}

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.