Configuración de una selección múltiple Altura de la caja elegida

Question

Estoy usando Elegido con un menú desplegable de selección múltiple, y me gustaría establecer la altura de la caja elegida a un tamaño determinado.

Tengo un cuadro elegido en un cuadro de diálogo con desbordamiento: oculto, y el recuadro elegido se coloca absolutamente fuera del contenedor (para que el menú desplegable seleccionado salga del cuadro de diálogo correctamente). Desafortunadamente, "position: absolute;" lo quita del flujo y no tiene altura ... lo que hace que el diálogo se reduzca y la selección múltiple parezca salir de él. Puedo configurar el contenedor padre a una altura fija, pero la selección múltiple se expande a medida que se seleccionan más opciones, y aún así me encontraré con el mismo problema en las listas largas.

¿Hay alguna manera de establecer la selección múltiple elegida a una altura específica? ¡Gracias!

Answer 1

No importa ... lo descubrió por mi cuenta el uso de CSS:

.mycontainer { 
    height: 120px; 
} 

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

.mycontainer es el div que contiene el menú desplegable elegido.

---

Deje de editar la respuesta. Esta respuesta se alinea con la versión de Chosen que estaba disponible hace 2 años cuando originalmente hice la pregunta. Para aquellas personas que están utilizando versiones más nuevas (es decir, 1.4.2), puede intentar cambiar el prefijo "chzn" en el CSS anterior por "elegido" ... pero no hay garantías de que esto funcione (no he visto su nuevo . estilismo)

Answer 2

que fue capaz de resolver la altura lista de la clase CSS a continuación:

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

y me dieron el desplazamiento de la la lista restante.

Answer 3

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

Answer 4

Todas las otras respuestas funciona, pero creo que esta es la solución más elegante: Establecer una nueva altura máxima de .chzn-results (por ejemplo 150px). Todos los otros bloques relevantes seguirán. De esta forma, el menú desplegable no será demasiado grande con solo unos pocos resultados.

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

Si realmente quieres una altura fija, incluso con pocos resultados, basta con utilizar el siguiente código:

.chzn-results { 
    height: 150px; 
} 

(Añadir !important a la línea si es necesario anular el comportamiento chosen.css 's)

Answer 5

Esto es lo que hizo el truco para mí:

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

Y Básicamente, quieres limitar la altura del ul que contiene las opciones.