2012-09-28 5 views
13

Sto usando Scelto con un menu a discesa a selezione multipla, e vorrei impostare l'altezza della casella scelta su una dimensione impostata.Impostazione di un multiselect Altezza casella selezionata.

Ho una casella selezionata in una finestra di dialogo con overflow: nascosta, e la casella scelta è posizionata assolutamente al di fuori del contenitore (in modo che il menu a discesa scelto venga visualizzato correttamente nella finestra di dialogo.) Sfortunatamente, "position: absolute;" lo rimuove dal flusso e non produce altezza ... rendendo il dialogo più piccolo e la multi-selezione sembra saltar fuori da esso. Posso impostare il contenitore genitore a un'altezza fissa, ma la selezione multipla si espande man mano che vengono selezionate più opzioni, e continuerò a imbattermi nello stesso problema su lunghi elenchi.

C'è un modo per impostare la selezione multipla selezionata per un'altezza specifica? Grazie!

+0

plz fornire un codice? – StaticVariable

risposta

18

Nevermind ... capito da solo usando i CSS:

.mycontainer { 
    height: 120px; 
} 

.mycontainer .chzn-container-multi .chzn-choices { 
    height: 120px !important; 
    overflow-y: auto; 
} 

.mycontainer è il div che contiene il menu a discesa prescelto.


Si prega di smettere di modificare la risposta. Questa risposta è in linea con la versione di Chosen che era disponibile 2 anni fa quando inizialmente ho posto la domanda. Per coloro che usano versioni più recenti (ad esempio 1.4.2), puoi provare a cambiare il prefisso "chzn" nel CSS sopra in "scelto" ... ma non è garantito che funzioni (non ho guardato il loro nuovo . styling)

+0

Puoi selezionarlo come risposta! Grazie a tutti –

+0

Ho aggiunto ".mycontainer .ms-list" e ho funzionato correttamente. (Non .chzn-container-multi .chzn-choices) –

+0

Questo non funziona a partire da 1.6.2 - L'altezza cambierà ma gli elementi interni non centreranno verticalmente come previsto. –

2

sono stato in grado di risolvere l'altezza lista nella classe css qui sotto:

.chzn-container .chzn-results { 
height: 150px;} 

e ho ottenuto il rotolo per il restante della lista.

+1

Che funziona perfettamente .. –

3
.chzn-container .chzn-results { max-height: 150px; } 
+0

qualche spiegazione potrebbe aiutare la risposta qui. – dove

2

Tutte le altre risposte lavoro, ma credo che questo sia la soluzione più elegante: Impostare una nuova altezza massima per .chzn-results (ad esempio 150px). Seguiranno tutti gli altri blocchi rilevanti. In questo modo il menu a discesa non sarà troppo grande con solo pochi risultati.

.chzn-results { 
    max-height: 150px; 
} 

Se si vuole veramente un'altezza fissa, anche con pochi risultati, è sufficiente utilizzare il seguente codice:

.chzn-results { 
    height: 150px; 
} 

(Aggiungi !important alla linea se è necessario sovrascrivere il comportamento s' chosen.css)

3

Questo è ciò che ha fatto il trucco per me:

.mycontainer .chosen-choices { 
    max-height: 150px; 
    overflow-y: auto; 
} 

Y in pratica vuoi limitare l'altezza dell'ul che contiene le opzioni.