Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Chosen div falls behind Twitter Bootstrap accordion

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?

like image 478
w00 Avatar asked Feb 16 '13 21:02

w00


3 Answers

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.

like image 98
tjdecke Avatar answered Nov 19 '22 06:11

tjdecke


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.

like image 6
Sudhir Avatar answered Nov 19 '22 07:11

Sudhir


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", "");
   });
}
like image 6
Zeeshan Ali Avatar answered Nov 19 '22 08:11

Zeeshan Ali