Problema
Tengo un <select>donde uno de sus <option>valores de texto es muy largo. Quiero <select>que cambie el tamaño para que nunca sea más ancho que su padre, incluso si tiene que cortar el texto que se muestra.max-width: 100%Debería hacer eso.
Antes de cambiar el tamaño:
Lo que quiero después de cambiar el tamaño:
Pero si carga este ejemplo de jsFiddle y cambia el tamaño del ancho del panel Resultado para que sea más pequeño que el del <select>, puede ver que la selección dentro del<fieldset> no logra reducir su ancho.
Lo que realmente estoy viendo después de cambiar el tamaño:
Sin embargo, la página equivalente con una en <div>lugar de una<fieldset> escala correctamente. Puede ver eso y probar sus cambios más fácilmente si tiene un <fieldset>y uno al <div>lado del otro en una página . Y si elimina las <fieldset>etiquetas circundantes , el cambio de tamaño funciona. los<fieldset> etiqueta está causando que se rompa el cambio de tamaño horizontal.
Los <fieldset>actos son como si hubiera una regla CSS fieldset { min-width: min-content; }. ( min-contentsignifica, aproximadamente, el ancho más pequeño que no hace que un niño se desborde). Si reemplazo el <fieldset>con un <div>conmin-width: min-content , se ve exactamente igual. Sin embargo, no hay ninguna regla min-contenten mis estilos, en la hoja de estilos predeterminada del navegador o visible en el Inspector CSS de Firebug. Traté de anular todos los estilos visibles en el <fieldset>Inspector CSS de Firebug y en la hoja de estilo predeterminada de Firefox forms.css , pero eso no ayudó. Específicamente anulando min-widthywidth tampoco hizo nada.
Código
HTML del conjunto de campos:
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>
Mi CSS que debería funcionar pero no lo es:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}
Restablecer las widthpropiedades a los valores predeterminados no hace nada:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}
Más CSS en el que intento y no soluciono el problema :
/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}
Más detalles
El problema también ocurre en este ejemplo de jsFiddle más completo y más complicado , que es más similar a la página web que estoy tratando de arreglar. Puede ver a partir de eso que <select>no es el problema: un bloque en línea divtampoco puede cambiar el tamaño. Aunque este ejemplo es más complicado, supongo que la solución para el caso simple anterior también solucionará este caso más complicado.
[Editar: consulte los detalles de soporte del navegador a continuación.]
Una cosa curiosa sobre este problema es que si configuradiv.wrapper { width: 50%; } , las <fieldset>paradas se redimensionan en el punto, entonces el tamaño completo <select>habría llegado al borde de la ventana gráfica. El cambio de tamaño ocurre como si lo <select>hubiera hecho width: 100%, aunque <select>parezca que sí width: 50%.
Si das el <select>sí mismowidth: 50% , ese comportamiento no ocurre; el ancho simplemente está configurado correctamente.
No entiendo la razón de esa diferencia. Pero puede no ser relevante.
También encontré la pregunta muy similar El conjunto de campos HTML permite a los niños expandirse indefinidamente . El autor de la pregunta no pudo encontrar una solución y adivina que no hay solución aparte de eliminar la <fieldset>. Pero me pregunto, si realmente es imposible hacer la <fieldset>pantalla correctamente, ¿por qué es eso? ¿Qué en <fieldset>la especificación o CSS predeterminado (a partir de esta pregunta ) causa este comportamiento? Este comportamiento especial probablemente esté documentado en alguna parte, ya que varios navegadores funcionan así.
Objetivo de fondo y requisitos
La razón por la que intento hacer esto es como parte de la escritura de estilos móviles para una página existente con una gran forma. El formulario tiene varias secciones, y una parte está envuelta en una <fieldset>. En un teléfono inteligente (o si hace que la ventana de su navegador sea pequeña), la parte de la página con este <fieldset>es mucho más ancha que el resto del formulario. La mayor parte del formulario restringe su ancho muy bien, pero la sección con <fieldset>no lo hace, lo que obliga al usuario a alejarse o desplazarse hacia la derecha para ver toda esa sección.
Tengo cuidado de simplemente eliminarlo <fieldset>, ya que se genera en muchas páginas en una aplicación grande, y no estoy seguro de qué selectores en CSS o JavaScript podrían depender de él.
Puedo usar JavaScript si lo necesito, y una solución de JavaScript es mejor que nada. Pero si JavaScript es la única forma de hacer esto, me gustaría escuchar una explicación de por qué esto no es posible usando solo CSS y HTML.
Editar: soporte del navegador
En el sitio, necesito admitir Internet Explorer 8 y versiones posteriores (acabamos de dejar de admitir IE7), el último Firefox y el último Chrome. Esta página en particular también debería funcionar en teléfonos inteligentes iOS y Android. Un comportamiento ligeramente degradado pero aún utilizable es aceptable para Internet Explorer 8.
Volví a probar mi fieldsetejemplo roto en diferentes navegadores. En realidad, ya funciona en estos navegadores:
- Internet Explorer 8, 9 y 10
- Cromo
- Chrome para Android
Se rompe en estos navegadores:
- Firefox
- Firefox para Android
- Internet Explorer 7
Por lo tanto, el único navegador que me importa en el que se rompe el código actual es Firefox (tanto en computadoras de escritorio como en dispositivos móviles). Si el código se corrigiera para que funcionara en Firefox sin romperlo en ningún otro navegador, eso resolvería mi problema.
La plantilla HTML del sitio utiliza comentarios condicionales de Internet Explorer para agregar clases como .ie8y .oldieal <html>elemento. Puede usar esas clases en su CSS si necesita solucionar las diferencias de estilo en IE. Las clases agregadas son las mismas que en esta versión anterior de HTML5 Boilerplate .
<fieldset>(o div.wrapper) cualquier ancho que necesite, y select { width:100% }. max-widthparece dar al elemento un porcentaje del ancho original de su padre , luego no se escala, mientras widthque se escala con su padre. Creo que hará lo que quieras (pero podría haber entendido mal). En su violín más complejo, intente asignar a los campos de la columna izquierda un% de ancho y un mínimo de píxeles de ancho. Luego dé los campos a la derecha 100 - (campos de la izquierda -% - ancho)% ancho.