jQuery Chosen div falls behind Twitter Bootstrap a

问题:

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?

回答1:

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

回答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.

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

回答4:

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.

回答5:

I had a similar issue with the Chosen select getting a width of 0px when I was using it within a Bootstrap collapse element. This was easily fixed by adding width:100%!important; to the element .chosen-container in my CSS.

回答6:

Change chosen.min.css or chosen.css :

.chosen-container{position:relative;

To :

.chosen-container{position: fixed;

It works for me.

回答7:

I just fixed it with the css line :

div.chosen-container-active{
    z-index:9999;
}

回答8:

For new versions

.chosen-drop {
    z-index: 999999 !important;
}

for old versions

.chzn-drop {
    z-index: 999999 !important;
}

This worked for me "chosen1.3" and "bootstrap3.1", this solution may need some considerations, but I did not face any issues. Please read more https://github.com/harvesthq/chosen/issues/86

回答9:

I fix this by putting overflow: auto on the parent