Jak zatrzymać zmianę rozmiaru tekstu z zawierającego go kodu

Gram w responsywny układ i formularze. Jestem bardzo zadowolony z tego, co do tej pory zrobiłem: działa dobrze z telefonu komórkowego na szeroki ekran; patrz poniżej. (Dotychczas testowane tylko na firefox/chrome.)Jak zatrzymać zmianę rozmiaru tekstu z zawierającego go kodu

Przy szerokości 800 pikseli przesuwa blok wiadomości w prawą kolumnę. Problem polega na tym, że robi się to z floatem: right i position: absolute, co oznacza, że jego wysokość zatrzymuje się na otaczającym div. Tak więc okno komunikatu się odstaje.

Mogę (i zrobię) poprawić to przez dodanie wysokości: 220px, aby domyślnie wyglądało dobrze. Ale ktoś może nadal zmieniać rozmiar textarea poza otaczającym div. Uważam, że zmiana rozmiaru tekstu to wspaniała funkcja, więc nie chcesz, aby zabroniono zmiany rozmiaru. I przepełnienie: auto nie jest rozwiązaniem: użytkownik po prostu wymieniał paski przewijania na obszarze tekstowym dla pasków przewijania na div!

Czy istnieje sposób na zmianę rozmiaru zewnętrznego div tak, aby zawsze zawierał 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>

Źródło

2012-07-05 Darren Cook

interesujące. Jeśli nikt nie odpowie wcześniej, będę miał dziś wieczór. – baptme

Użyj pływaka: prawo zamiast bezwzględnego pozycjonowania prawego obszaru. A następnie owinąć div wokół innych pól, unieść w lewo, a następnie po prostu wyczyścić wszystko.

Przykład

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

Źródło

2012-07-05 14:52:01 zen

Dobra robota, właśnie o tym myślałem. +1 – baptme

Dzięki. Działało idealnie! –

Jak zatrzymać zmianę rozmiaru tekstu z zawierającego go kodu

Odpowiedz

Powiązane problemy