Text 26 Mar Fool-Proofing Resizable Text Areas

Okay developers, we now have three of the four major browsers supporting re-sizable textarea elements, so it’s about time to update those stylesheets! Here’s what you’re going to do:

  1. Find anywhere in your CSS that you have a textarea rule
  2. You probably have a width and height set on it, amirite?
  3. Set min-height to match the default height setting.
  4. Set max-height to be 2 or 3 times the default height.
  5. Which leaves us with width. Now, this whole resizing thing is actually a pretty cool usability feature, which is why I don’t have you turning it off completely. So finish the CSS off be setting resize: vertical. You could also set min and max widths, but this way is one less line of CSS and you will get a more appropriate resize cursor from your browser.

Now you’ve fool-proofed your textareas by limiting their minimum dimensions, while retaining the usability enhancement of allowing users to make the textarea bigger (should they so desire) in order to see more of what they are writing.


Design crafted by Prashanth Kamalakanthan. Powered by Tumblr.