Estoy usando una lista de datos HTML para mostrar varias trayectorias profesionales pero mi número de opciones es demasiado largo. Deseo darle un efecto de desplazamiento. Lo busqué, pero lo único que encontré fue que CSS no se puede aplicar en la lista de datos. ¿Es posible aplicar estilos en la lista de datos usando jQuery?
Aquí está mi marcado HTML:
<input class="form-control searchbar" #input (input)="filterdata(input.value)" [(ngModel)]="homesearch" id="home_ssearch" name="careerr" list="careers" placeholder="Discover more about any career you like" /> <div> <datalist class="datalist" id="careers" > <option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option> </datalist> </div>Prueba esto
.scrollable { overflow-y: auto !important; // Use !important only if there is already an overflow style rule for this element and you want to override }Y solo aplícalo así:
<datalist class="datalist scrollable" id="careers" > <option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option> </datalist>¡Espero eso ayude! ;)
Actualización 1:
Odio los estilos en línea, pero intentémoslo para ver si <datalist> acepta estilos. Prueba esto:
<datalist class="datalist scrollable" id="careers" style="overflow-y: auto!important">Este enfoque simple funciona para mí:
datalist { max-height: 500px; overflow-y: auto; } Nota: este CSS aplicará el efecto de desplazamiento a todos los <datalist>
En general, no puedes. Este elemento es un ejemplo de un "elemento reemplazado", estos dependen del sistema operativo y no forman parte del HTML/navegador. No se puede diseñar a través de CSS.
En su lugar, puede usar el menú desplegable de arranque o cualquier otro complemento para el mismo.
He usado bootstrap para ello, puede ajustar la altura en consecuencia, por ejemplo,
.dropdown-menu { max-height: 150px; overflow-y: auto; }