Question

CSS

#editpro{
background:#CEEBFB;
margin-left:30px;
margin-right:500px;
text-align:center;
color:#3687cc;
font-size:20px;
border:2px ridge #3687cc;
border-radius:15px;
width:350px;
}

HTML

  <div id="editpro">
   <form>
     <label for="username">Username </label>
     <input  type="text" id="username" name="username"/><br /><br />
     <label for="password1">Password </label>
     <input  type="password" id="password1" name="password1" /><br /><br />
     <textarea id="myTextarea" style="width:320px"></textarea>
     <input type="submit" value="submit"/>
   </form>
  </div>

This is my page, height-wise whenever i try to expand the textarea, I do not face any problem, but when I try to stretch it width wise, it overflows out of the div editpro.

How do I control this expandability, because the width specification does not seem to control its overflow.

Answer 1

To disable the re-sizable feature of the text area, use

textarea {resize:none} /* completely disable resize */
textarea {resize:vertical} /* disable horizontal resize */
textarea {resize:horizontal} /* disable vertical resize */

See: http://dev.l-c-n.com/form-controls/resize_textarea.html

Keep in mind, however, that this may be annoying to your user. The resizing of text areas is part of the UI now, like scroll bars or zooming text. By defeating this aspect of the UI, you have taken some control away from your user, which can be frustrating. Consider if it is necessary – after all, if the user resizing the box breaks your layout or looks funny, they aren’t going to hold it against you – they know they’ve done something to the page and won’t be confused.