Come interrompere il ridimensionamento dell'area di testo dal suo div contenimento

Ho giocato con layout e moduli reattivi. Sono abbastanza soddisfatto di quello che ho finora: funziona bene dal cellulare allo schermo panoramico; vedi sotto. (Solo testato su firefox/chrome finora.)Come interrompere il ridimensionamento dell'area di testo dal suo div contenimento

Alla larghezza di 800 px sposta il blocco di messaggi sulla colonna di destra. Il problema è che questo viene fatto con un float: right e position: absolute, che significa che le sue altezze si fermano influenzando il div circostante. Quindi la finestra del messaggio sporge.

Posso (e farlo) migliorare questo aggiungendo l'altezza: 220px, in modo che sia ok per impostazione predefinita. Ma qualcuno può ancora ridimensionare la textarea al di fuori del div circostante. Trovo che ridimensionare i textareas sia una caratteristica meravigliosa, quindi non voglio disabilitare il ridimensionamento. E overflow: auto non è una soluzione: l'utente si limiterebbe a scambiare le barre di scorrimento nell'area di testo per le barre di scorrimento sul div!

Quindi, c'è un modo per avere il div esterno ridimensionato per contenere sempre la textarea?

<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>

fonte

2012-07-05 Darren Cook

interessante. Se nessuno risponde prima, guarderò stasera. – baptme

Utilizzare il galleggiante: a destra invece di posizionare l'area corretta. E poi avvolgi un div intorno agli altri campi, fluttua a sinistra, e poi cancella tutto.

Esempio

<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>

fonte

2012-07-05 14:52:01 zen

ben fatto, questo è quello che stavo pensando. +1 – baptme

Grazie. Ha funzionato perfettamente! –

Come interrompere il ridimensionamento dell'area di testo dal suo div contenimento

risposta

Problemi correlati