2010-02-17 15 views
6

Esta es probablemente una pregunta básica de CSS, pero no domino el CSS y parece que voy en círculos.Elemento de selección de HTML con ancho fijo y barras de desplazamiento

Esto es lo que tengo en inglés: Tengo un elemento de selección de ancho fijo de 400px. El texto para cada una de las opciones no cabe en ese ancho de 400px. No obtengo una barra de desplazamiento horizontal, simplemente corta el texto. ¿Cómo obtengo la barra de desplazamiento?

Esto es lo que tengo en HTML/CSS:

<div> 
    <select style="width=400px"> 
    <option>this text is too wide to fit and gets cut off.....</option> 
    ... 
    </select> 
</div> 

He probado la propiedad de desbordamiento, pero estoy bien utilizándolo correctamente o que no funciona en el elemento de selección.

¿Cómo obtengo la barra de desplazamiento horizontal?

Respuesta

13

elementos de formulario son notoriamente difíciles de estilo.

Para la configuración del ancho, tiene un pequeño error tipográfico. Es necesario

<select style="width: 400px"> 

De lo contrario, creo que las barras de desplazamiento horizontal no se puede lograr usando un elemento de select normal. Tendría que recurrir a una alternativa basada en JavaScript como SexyCombo, que puede ser personalizable para tener una barra de desplazamiento. Más opciones aquí: 11 jQuery Plugins to Enhance HTML Dropdowns

+0

lo siento, el "width =" es un error y no está en mi código real . ¿Es posible hacer que la selección sea realmente grande para que se ajuste a todo el texto, y hacer que el div circundante tenga un ancho/alto fijo que tenga barras de desplazamiento? – schmimd04

+0

@ schmimd04 Eso debería ser posible dando al DIV circundante un tamaño fijo y 'desbordamiento: automático;' Sin embargo, traerá problemas adicionales, como el botón de flecha que se oculta también. Pero pruébalo. –

+1

Simplemente no le dé al seleccionar un "ancho" y será tan grande como la opción más larga. Luego, rodee la selección con un DIV que, p. tiene '' ancho: 400px; desbordamiento: auto; '' – Select0r

3
  1. debe ser <select style="width: 400px;"> (no "width=")
  2. un HTML normal de selección no tiene una barra de desplazamiento, no importa lo que haces :)
+1

'2.a seleccione no tiene una barra de desplazamiento, no importa lo que haces:)' - Entonces, ¿cómo manejar múltiples selecciones? '' –

+1

@Andy no es justo, 'select multiple' es un animal diferente :) –

0

estás usando la sintaxis css en línea debes usar style = "width: 400px;"

Y si tiene utilizar selección múltiple que acaba de utilizar

<select multiple style="width: 400px;"> 
Cuestiones relacionadas