0
727
Vistasel ancho de la opción de lista de datos es más pequeño que el ancho de entrada cuando px es más de 600px. ¿Cómo lo soluciono dinámicamente en Chrome?
Hola a todos, estoy usando la clase de control de formulario WTForm del matraz para el ancho, pero no estoy seguro de cómo hacerlo en el fragmento, así que codifico el ancho.
El problema al que me enfrento es que la entrada es muy larga, pero la opción desplegable no coincide con el ancho de entrada. Cuando ejecuta el fragmento, puede ver que el menú desplegable es como 1/10 del ancho de entrada. Intenté dar la opción y la lista de datos del mismo ancho, pero nada funciona.
¿Cómo lo haría para que la opción desplegable en Chrome tenga el mismo ancho que mi entrada, gracias?
<input class="form-control" type="text" id="color" style = "width:800px" list="colors_data"> <datalist id="colors_data"class="form-control"style = "width:800px"> <option style = "width:800px"value="red"></option> <option style = "width:800px"value="orange"></option> <option style = "width:800px"value="green"></option> <option style = "width:800px"value="blue">The color of the sky</option> </datalist>Editar: cambie el tamaño a 800 px Intento crear mi propia lista de datos a través de este enlace pero me enfrento al mismo problema Creando una lista de datos HTML5 sobre la marcha
Incluí una imagen para mostrar el problema más claramente. Como puede ver, la opción desplegable es mucho más pequeña que la entrada en sí. como soluciono esto gracias 
2 Respuestas
Responde la pregunta0
Ok, ahora que finalmente sé lo que querías, aquí está tu código:
<input style = "width:200px; height:30px;" list="colors_data"> <datalist id="colors_data"> <option value="red">The color of apple</option> <option value="orange">The color of sun</option> <option value="green">The color of grass</option> <option value="blue">The color of the sky</option> </datalist>0
El elemento <datalist> es muy inflexible: no puede diseñarlo en absoluto, ya que su estilo proviene del navegador y solo del navegador.
Si desea establecer un ancho o aplicar cualquier otro estilo, tendrá que conformarse con un <datalist> personalizado.
Sin embargo, podría intentar agregar mediante programación al valor para ampliar artificialmente la longitud de <datalist> , pero Chrome establece un ancho máximo en las listas de datos, por lo que más allá de cierto punto, simplemente se cortará.