Búsqueda de sitios web

javascript - altura del desplegable de selectize basada en la altura de la pantalla


¡Buen día!

Tengo un menú desplegable usando el complemento "selectize". ¿Cómo puedo establecer la altura del contenido del menú desplegable basada en la altura de la pantalla? Dado que tengo muchos elementos en mi menú desplegable, sería bueno presentarlos en una lista mucho más larga que solo una corta.

Actualmente lo que tengo.

salida deseada

Intenté usar el código de abajo, solo jugando en la consola, pero tampoco funciona.

.selectize-dropdown, .selectize-dropdown.form-control{
        height: -webkit-fill-available !important;
        height: -moz-available !important;
        height: fill-available !important;
}

.selectize-dropdown-content{
   /* height: -webkit-fill-available !important;
        height: -moz-available !important;
        height: fill-available !important;*/

}

¿Alguna sugerencia, por favor? ¡Gracias!

Respuesta #1

Logro alcanzar el resultado deseado mediante

.selectize-dropdown, .selectize-dropdown.form-control{
    height: 90vh !important;
}

.selectize-dropdown-content{
    max-height: 100% !important;
    height: 100% !important;
}

Respuesta #2

.selectize-dropdown-content{
    max-height: 90vh !important;
}

Esta sencilla línea de código se ampliará/reducirá de manera adecuada cuando se añadan o eliminen opciones del control de selección.

Seleccione con muchas opciones:

Selecciona con pocas opciones: