jQuery Chosen div cade dietro Twitter Bootstrap fisarmonica

Question

Sto usando il plugin jQuery scelto all'interno di una fisarmonica Bootstrap di Twitter. Il problema che ho è che il menu a tendina del plugin scelto appare "sotto" il div del menu fisarmonica. Ho provato a impostare lo z-index su un valore più alto, ma questo non ha funzionato.

ho fatto un esempio del mio problema: http://jsfiddle.net/8BAZY/1/

Se si fa clic sulla casella select vedrai che il menu appare sotto il div. Come posso far apparire il dropdown ontop del div della fisarmonica, così posso vedere tutti i risultati?

Answer 1

Il problema è perché .collapse ha overflow: hidden. Ovviamente il dropdown scelto in modo assoluto verrà ritagliato. - dfsq due giorni fa

Answer 2

Maggiori informazioni su questo tema scelto è qui https://github.com/harvesthq/chosen/issues/86

Una soluzione basata sui suggerimenti dati su quella pagina 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", ""); 
     }); 
}); 

Grazie.

Answer 3

Non è elegante, ma lo si può fare in questo modo:

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

Questo farà in modo che venga ritagliato quando è crollato, e visibile quando mostrato.

Answer 4

Soluzione inviato da Sudhir funzionato per me, tranne che aveva un problema minore: Quando si dispone di più di un controllo scelto all'interno del div e si espande altre prescelto mentre c'è uno già espanso, il nuovo cadrà dietro la fisarmonica. Questo perché il primo menu a discesa imposta l'overflow su nascosto dopo che il secondo è stato espanso. Ecco la soluzione.

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

Answer 5

ho appena riparato con la linea css:

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

Answer 6

Per le nuove versioni

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

per le vecchie versioni

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

questo ha lavorato per me "chosen1. 3 "e" bootstrap3.1 ", questa soluzione may hanno bisogno di alcune considerazioni, ma non ho affrontato alcun problema. Per favore leggi di più https://github.com/harvesthq/chosen/issues/86

Answer 7

Ho avuto un problema simile con il Prescelto selezionando ottenere una larghezza di 0px quando lo stavo usando all'interno di un elemento di compressione di Bootstrap. Ciò è stato facilmente risolto aggiungendo width:100%!important; all'elemento .chosen-container nel mio CSS.

Answer 8

Cambia scelto.min.css o scelto.css:

.chosen-container{position:relative; 

A:

.chosen-container{position: fixed; 

Funziona per me.

Answer 9

posso risolvere questo problema mettendo overflow: auto sul genitore