html - full - ¿Cómo puedo hacer un TextArea 100% de ancho sin desbordar cuando el relleno está presente en CSS?
textarea responsive (15)
Tengo el siguiente fragmento de código CSS y HTML que se está procesando.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"/>
</div>
El problema es que el área de texto termina siendo 8px más ancha (2px para el borde + 6px para el relleno) que el principal. ¿Hay alguna forma de continuar utilizando el borde y el relleno pero restringiendo el tamaño total del área de textarea al ancho del elemento principal?
¿Qué hay de los márgenes negativos?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
A menudo soluciono ese problema con calc() . Solo le da al área de texturas un ancho del 100% y una cierta cantidad de relleno, pero tiene que restar el relleno total a la izquierda y la derecha del ancho del 100% que le ha dado al área de texas:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
O si quieres darle un borde al texto:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
Consideremos la salida final que se muestra al usuario de lo que queremos lograr: un área de texto acolchada con un borde y un relleno, cuyas características son que al hacer clic pasen el foco a nuestra área de texto y la ventaja de un ancho automático del 100%. Típico de los elementos de bloque.
El mejor enfoque en mi opinión es utilizar soluciones de bajo nivel en la medida de lo posible, para alcanzar el máximo soporte de los navegadores. En este caso, el único HTML podría funcionar bien, evitando el uso de Javascript (que de todos modos amamos a todos).
La etiqueta LABEL viene en nuestra ayuda porque tiene ese comportamiento y puede contener los elementos de entrada a los que debe dirigirse. Su estilo predeterminado es el de los elementos en línea, por lo que, al darle a la etiqueta un estilo de visualización de bloque, podemos aprovechar el ancho automático del 100%, incluyendo el relleno y los bordes, mientras que el área de texto interior no tiene bordes, sin relleno y un ancho del 100%. .
Echando un vistazo a los detalles del W3C, otras ventajas que podemos observar son:
- no se necesita el atributo "para": cuando una etiqueta LABEL contiene la entrada de destino, automáticamente enfoca la entrada del niño cuando se hace clic;
- Si ya se ha diseñado una etiqueta externa para el área de texto, no se producen conflictos, ya que una entrada dada puede tener una o más etiquetas.
Consulte las especificaciones del W3C para obtener información más detallada.
Ejemplo simple:
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.container { width: 400px; border: 3px solid #f7c; }
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea { width: 100%; margin: 0; padding: 0; border-width: 0; }
</style>
</head>
El relleno y el borde de los elementos .textareaContainer son los que queremos darle al área de texto. Intenta editarlos para personalizarlo como quieras. Le di un relleno y bordes grandes y visibles al elemento .textareaContainer para permitirle ver su comportamiento cuando se hace clic.
Encontré otra solución here que es muy simple: agregue relleno al contenedor de textarea. Esto mantiene el margen, el borde y el relleno en el área de texto, lo que evita el problema que Beck señaló sobre el foco de atención que Chrome y Safari colocaron alrededor del área de texto.
El relleno a la derecha del contenedor debe ser la suma del margen efectivo, el borde y el relleno en ambos lados del área de texto, más cualquier relleno que de lo contrario se pueda desear para el contenedor. Entonces, para el caso de la pregunta original:
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
<textarea></textarea>
</div>
Estaba buscando una solución de estilo en línea en lugar de una solución CSS, y esto es lo mejor que puedo conseguir para un área de texto receptiva:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
Este código me funciona con IE8 y Firefox
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
La respuesta a muchos problemas de formato CSS parece ser "agregar otro <div>!"
Entonces, con ese espíritu, ¿has intentado agregar un div de envoltura al que se aplica el borde / relleno y luego colocar el área de texto de 100% de ancho dentro de eso? Algo como (sin probar):
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
No, no puedes hacer eso con CSS. Esa es la razón por la que Microsoft introdujo inicialmente otro modelo de caja , y quizás más práctico. El modelo de caja que finalmente ganó, hace que no sea práctico mezclar porcentajes y unidades.
No creo que esté de acuerdo con usted para expresar el relleno y los anchos de los bordes en porcentaje del padre también.
Para las personas que usan Bootstrap, textarea.form-control también puede llevar a problemas de tamaño de textarea. Chrome y Firefox parecen usar diferentes alturas con el siguiente Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
Por qué no? Olvida los hacks y solo hazlo con CSS?
Uno que uso con frecuencia:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Vea el soporte del navegador here .
Puede hacer uso de la propiedad de tamaño de caja, es compatible con todos los principales navegadores compatibles con el estándar e IE8 +. Aún así necesitarás una solución para IE7. Lea más here .
Si lo rellenas y lo compensas así:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
el lado derecho del área de texto se alinea perfectamente con el lado derecho del contenedor, y el texto dentro del área de texto se alinea perfectamente con el texto del cuerpo en el contenedor ... y el lado izquierdo del área de texto "sobresale" un poco. a veces es más bonito
Si no estás demasiado preocupado por el ancho del relleno, esta solución también mantendrá el relleno en porcentajes también.
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
No es perfecto, pero obtendrás algo de relleno y el ancho aumenta hasta el 100%, por lo que todo es bueno
Utilice la propiedad de tamaño de caja :
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
Eso ayudará
* {
box-sizing: border-box;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
<div class="container">
<div class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
</div>
<div class="row">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">UK</option>
<option value="canada">USA</option>
<option value="usa">RU</option>
</select>
</div>
<div class="row">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>