4

Estoy trabajando en un diseño responsivo y tengo algunos input con atributo size variables, dependiendo del contenido. Al aplicar max-width no funciona, haciendo crecer al contenedor, incluso con porcentaje menor a 100, como se ve en esta imagen:

Fieldset crece por el input

Nota: Para este ejemplo estoy usando una medida fija (en pixeles) para el contenedor, sin embargo, con media queries la medida final es en porcentaje, tanto contenedor como input.

Al menos en Firefox pasa con este fragmento de código:

fieldset {
    width:400px;
    margin:20px auto;
}
.texto-max {
    /* Se muestra con el tamaño especificado (¿?), */
    /* pero "reserva" espacio al final */
    /* haciendo crecer al contenedor */
    max-width:80%;
}
.texto {
    width:100%;
}
<fieldset>
  <legend>Prueba</legend>
  <input type="text" name="texto" size="80" class="texto-max" placeholder="Clase texto-max">
</fieldset>
<fieldset>
  <legend>Prueba</legend>
  <input type="text" name="texto" size="80" class="texto" placeholder="Clase texto">
</fieldset>

Asignando un ancho fijo (width) podría funcionar, a reserva de revisar todos los formularios del sitio, donde aparecen campos en columnas o uno al lado de otro.

Leyendo la respuesta de esta pregunta veo que max-width puede funcionar usando medidas relativas al viewport, pero necesito que se adapte al contenedor.

¿Hay alguna solución sin recurrir a Javascript ni modificar el atributo size?

2
  • 1
    Hola, en este caso, ya que el contenedor sí tiene un ancho fijo, podrías ponerle directamente el max-width en 320px (80% de 400px) y ahí sí funciona
    – Erica T.
    Commented el 18 sept. 2020 a las 18:27
  • Muchas gracias, @EricaT., no había considerado esa posibilidad, sin embargo, al trabajar con diseño responsivo, llega un punto donde el contenedor queda al 100% del ancho disponible y ya no es viable usar medidas en pixeles.
    – Triby
    Commented el 18 sept. 2020 a las 18:38

1 respuesta 1

2

Los navegadores tienen CSS personalizado para ciertos los elementos.
Por ejemplo:

Solución:

Basta con establecer min-inline-size: 0; o min-width: 0; para solucionar tu problema.

fieldset {
  width: 400px;
  margin: 20px auto;
  min-inline-size: 0;
}
.texto-max {
  max-width: 80%;
}
.texto {
  width: 100%;
}
<fieldset>
  <legend>Prueba</legend>
  <input type="text" name="texto" size="80" class="texto-max" placeholder="Clase texto-max">
</fieldset>
<fieldset>
  <legend>Prueba</legend>
  <input type="text" name="texto" size="80" class="texto" placeholder="Clase texto">
</fieldset>

1
  • Excelente, es una solución muy sencilla y me ahorraste muchos dolores de cabeza. ¡Gracias! Probado en Firefox, Chrome y derivados.
    – Triby
    Commented el 23 sept. 2020 a las 18:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.