¿Cómo puedo evitar que el textarea se extienda más allá de su elemento DIV padre? (solo problema de Google-chrome)
¿Cómo puedo evitar que el textarea se extienda más allá de su elemento DIV padre?
Tengo esta área de texto dentro de una tabla que está dentro de un DIV y parece que hace que toda la tabla se estire fuera de sus límites.
Puede ver un ejemplo de la misma situación incluso en un caso más simple, simplemente poniendo un área de texto dentro de un div (como lo que se usa aquí en www.stackoverflow.com)
Puede ver en las imágenes a continuación que el área de texto puede extenderse más allá del tamaño de su padre? ¿Cómo prevengo esto?
Soy un poco nuevo en CSS, así que realmente no sé qué atributos CSS debería usar. Probé varios como display, y overflow. Pero no parecen hacer el truco. ¿Algo más que podría haberme perdido?
ACTUALIZAR: HTML
CSS
textarea {
max-width: 50%;
}
#container {
width: 80%;
border: 1px solid red;
}
#cont2{
width: 60%;
border: 1px solid blue;
}
Si pones este código dentro del http://jsfiddle.net , ya verás que actúan de manera diferente. Aunque el área de texto se limita al porcentaje declarado en su estilo css, todavía es posible hacer que su tabla padre sea tan grande como quiera ser, y luego puede ver que se derrama sobre su borde padre. ¿Alguna idea sobre cómo arreglar esto?
4 answers
Para deshabilitar el redimensionamiento completamente:
textarea {
resize: none;
}
O puede limitar el tamaño:
textarea {
max-width: 100px;
max-height: 100px;
}
Para limitar el tamaño a la anchura y/o altura de los padres:
textarea {
max-width: 100%;
max-height: 100%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-09 10:34:23
Textarea resize control está disponible a través de la propiedad CSS3 resize :
textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }
Valores permitidos autoexplicativos: none (deshabilita el redimensionamiento del área de texto), both, vertical y horizontal.
Observe que en Chrome, Firefox y Safari el valor predeterminado es both.
Si desea restringir el ancho y la altura del elemento textarea, eso no es un problema: estos navegadores también respetan max-height, max-width, min-height, y min-width propiedades CSS para proporcionar redimensionar dentro de ciertas proporciones.
Ejemplo de Código:
#textarea-wrapper {
padding: 10px;
background-color: #f4f4f4;
width: 300px;
}
#textarea-wrapper textarea {
min-height:50px;
max-height:120px;
width: 290px;
}
#textarea-wrapper textarea.vertical {
resize: vertical;
}<div id="textarea-wrapper">
<label for="resize-default">Textarea (default):</label>
<textarea name="resize-default" id="resize-default"></textarea>
<label for="resize-vertical">Textarea (vertical):</label>
<textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-28 09:19:41
Espero que tengas el mismo problema que yo tuve... mi problema era simple: Hacer un área de texto fijo con porcentajes bloqueados dentro del contenedor (soy nuevo en CSS/JS/HTML, así que ten paciencia conmigo, si no entiendo la jerga correcta) de modo que no importa el dispositivo en el que se muestre, la caja que llena el contenedor (la celda de la tabla) ocupa la cantidad correcta de espacio. Así es como lo resolví:
<table width=100%>
<tr class="idbbs">
B.S.:
</tr></br>
<tr>
<textarea id="bsinpt"></textarea>
</tr>
</table>
Entonces CSS se ve así...
#bsinpt
{
color: gainsboro;
float: none;
background: black;
text-align: left;
font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
font-size: 100%;
position: absolute;
min-height: 60%;
min-width: 88%;
max-height: 60%;
max-width: 88%;
resize: none;
border-top-color: lightsteelblue;
border-top-width: 1px;
border-left-color: lightsteelblue;
border-left-width: 1px;
border-right-color: lightsteelblue;
border-right-width: 1px;
border-bottom-color: lightsteelblue;
border-bottom-width: 1px;
}
Lo siento por el bloque de código descuidado aquí, pero tenía que mostrarle lo que es importante y no se cómo insertar código CSS citado en este sitio web. En cualquier caso, para asegurarse de que ve lo que estoy hablando, el CSS importante es menos sangría aquí...
Lo que hice entonces (como se muestra aquí) es ajustar muy específicamente los porcentajes hasta que encontré los que funcionaron perfectamente para adaptarse a la pantalla, no importa qué pantalla del dispositivo se utiliza.
Concedido, creo que el "redimensionar: ninguno;" es excesivo, pero mejor prevenir que lamentar y ahora los consumidores de todos modos no tendrán que cambiar el tamaño de la caja, ni importará desde qué dispositivo la están viendo.
Funciona muy bien.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-18 06:16:24
textarea {
width: 700px;
height: 100px;
resize: none; }
Asigne su ancho y alto requeridos para el área de texto y luego use. resize: none ; propiedad css que deshabilitará la propiedad extensible de textarea.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-01 09:48:18