Cómo detener que textarea se redimensione fuera de su div que contiene

He estado jugando con diseños y formularios de respuesta. Estoy bastante satisfecho con lo que tengo hasta ahora: funciona muy bien desde el móvil a la pantalla ancha; vea abajo. (Solo probado en Firefox/Chrome hasta ahora.)Cómo detener que textarea se redimensione fuera de su div que contiene

Con un ancho de 800px mueve el bloque de mensajes a la columna de la derecha. El problema es que esto se hace con un flotador: derecha y posición: absoluta, lo que significa que su altura deja de afectar al div circundante. Entonces el cuadro de mensaje sobresale.

Puedo (y lo hago) mejorar esto agregando la altura: 220px, para que se vea bien de forma predeterminada. Pero alguien aún puede redimensionar el área de texto fuera del div circundante. Considero que cambiar el tamaño de las áreas de texto es una característica maravillosa, por lo que no quiero deshabilitar el cambio de tamaño. Y desbordamiento: auto no es una solución: ¡el usuario simplemente estaría intercambiando barras de desplazamiento en el área de texto para barras de desplazamiento en el div!

Entonces, ¿hay alguna manera de tener el div tamaño externo para contener siempre el área de texto?

<html> 
<head> 
<style> 
body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;} 

#contactform {margin: 0 auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;} 
#contactform .required:after{color:red;content:" *";} 
#contactform label {display:block;} 
#contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;} 
#contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;} 

@media (min-width: 800px) { 
#contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/} 
#formsecondhalf {top:0;right:6px;position:absolute;} 
#contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;} 
#contactform input,textarea {width: 300px;min-width:300px;max-width:300px;} 
} 

</style> 
</head> 
<body> 
<div id="contactform"> 
<form action="" method="post"> 
<label for="name" class="required">Name:</label> 
<input id="name"> 
<br/> 
<label for="email" class="required">Email:</label> 
<input id="email"> 
<br/> 
<div id="formsecondhalf"> 
<label for="message">Message:</label> 
<textarea id="message"></textarea> 
</div> 
<br /> 
<input type="submit" value="SEND"> 
</form> 
</div> 
</body> 
</html>

Fuente

2012-07-05 Darren Cook

interesante. Si nadie responde antes, voy a echar un vistazo esta noche. – baptme

Usar flotador: derecho en lugar de colocar completamente el área correcta. Y luego enrolle un div alrededor de los otros campos, flote ese izquierdo, y luego limpie todo.

Ejemplo

<html> 
    <head> 
     <style> 
      body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;} 

      #contactform {margin: 0 auto;overflow:auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;} 
      #contactform .required:after{color:red;content:" *";} 
      #contactform label {display:block;} 
      #contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;} 
      #contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;} 

      @media (min-width: 800px) { 
       #contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/} 
       #formsecondhalf {float:right;} 
       #formfirsthalf {float:left;} 
       #contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;} 
       #contactform input,textarea {width: 300px;min-width:300px;max-width:300px;} 
      } 

     </style> 
    </head> 
    <body> 
     <div id="contactform"> 
      <div id="formfirsthalf"> 
       <form action="" method="post"> 
        <label for="name" class="required">Name:</label> 
        <input id="name"> 
        <br/> 
        <label for="email" class="required">Email:</label> 
        <input id="email"> 
        <br/> 
      </div> 
      <div id="formsecondhalf"> 
       <label for="message">Message:</label> 
       <textarea id="message"></textarea> 
      </div> 
      <br /> 
      <input type="submit" value="SEND"> 
       </form> 
     </div> 
    </body> 
</html>

Fuente

2012-07-05 14:52:01 zen

bien hecho, eso es lo que estaba pensando. +1 – baptme

Gracias. ¡Funcionó perfectamente! –

Cómo detener que textarea se redimensione fuera de su div que contiene

Respuesta

Cuestiones relacionadas