Límite Ancho inicial de la lista de selección

Question

Tengo una lista de selección, donde algunos clientes han introducido opciones terriblemente largas para ellos, lo que rompe el diseño. Me pregunto si hay una manera de establecer un ancho fijo en el widget de selección, pero aún así tener el menú desplegable que produce sigue siendo lo suficientemente amplio como para mostrar toda la opción.

Answer 1

No estoy seguro si usted está abierto a usar jQuery en absoluto, sino que suelen utilizar este método:

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

es un poco picada pero se ve mejor que cortar el contenido

Answer 2

See the working example here.

sólo tiene que aplicar width a su cuadro de selección, ya sea en línea o CSS. Será tan ancho como haya especificado, pero cuando se haga clic en él, mostrará todas las opciones con cualquier ancho.

Answer 3

No sé si se puede hacer con CSS (navegador independiente), pero aquí hay otros 2 soluciones:

1. En lugar de mostrar "muuuuuy looooooooooong teeeeeeeeext" Para visualizar algo así como "¡fatal LOOOO. .. ";

2. Cree su selección usando divs y listas para que cuando esté cerrado tenga un ancho específico y cuando presione algo así como una flecha para mostrar el ancho completo. (No estoy seguro de que entiendas lo que trato de decir con este ...).

Answer 4

Si el la lista que tiene (las entradas en <select>) es ingresada por el usuario, y el usuario puede ingresar, digamos 500 caracteres, lo que definitivamente definirá.

En este caso, no iría por una lista <select>, sino una lista personalizada creada con, digamos, <div>.

Esto no es difícil, todo lo que necesita es

un div que contiene la opción por defecto ,
un div oculto con todas las opciones
Cuando el usuario hace clic en la opción por defecto mostrar el div oculto en
clic de los artículos en el div oculto (que ahora es visible) hacen que el elemento seleccionado en la primera div

no

Tal vez ya jquery plugin para esto. pero no estoy seguro si estás abierto a jquery, de todos modos no soy un experto en jquery.

Conozco este esfuerzo comparativamente más que tener un select, pero creo que vale la pena el esfuerzo. Todos los hacks: ampliar el div onmouseover, onclick, etc. no se ven muy bien, aún pueden romper su diseño, y dependiendo de la cantidad de datos que el usuario pueda ingresar, aún no serán efectivos.

En el enfoque de lista personalizada, puede envolver los elementos para que tenga el control completo.

Answer 5

Añadir a la CSS algo como esto:

select { 
    border: 1px solid #838383; 
    border-style: outset; 
    font-weight: bold; 
    color: #3F3F3F; 
    max-width: 150px !important; 
    overflow: hidden; 
} 

option { 
    max-width: 120px !important; 
    overflow: hidden; 
} 

Esto funciona para mí. Tenga en cuenta que hay no puntos delante de los anclajes.

Answer 6

Dado que no especifica qué compatibilidad con el navegador necesita, puede que esto sea o no una solución. Esto funciona en la mayoría de los navegadores IE9 +

select { 
    width: 100%; 
    max-width: 150px; 
} 

Corto y dulce. Cuando se expande, el select mostrará el texto completo (¡a menos que exceda la ventana gráfica!).