The Lab

6. Apr 2012

Keep your textareas on a short leash

Some modern browsers (Webkit and Gecko to be exact) let users resize textareas by default. This is a great feature for writing, but can turn out to be an issue for the pixel-perfectionists of us.

The problem?

The reader can now stretch the textarea out to sizes far exceeding what our layout is made for, and in some cases this can actually break the design.

Some examples?

No hard feelings intended, but check out the form in the footer of Sublink.ca. Type a few paragraphs and stretch the textarea as wide as possible. The content of the textarea will now mix with the rest of the text on the page. Not too good looking.

Or have a look at the comment form of the all mighty Snook.ca. Make the comment textarea as wide as you can, and then let go. The overflow:hidden of one of the parent elements now hides the textarea control, and you can no longer resize the field. To make it worse, if you type a few lines of text, everything exceeding the width of the parent will be hidden as well.

The solution

There are two ways to fix this. Either use the resize property, or apply max-width/max-height.

/* Either this: */ textarea { width:200px; height:200px; resize:vertical; } /* Or this: */ textarea { width:200px; height:200px; max-width:290px; max-height:450px; }

Test it!

I agree this is not one of the biggest problems out there, and making a big issue of this might be a bit far fetched. But as it is fairly easy to fix, I think we should!

If you have comments, please tweet me - @agrimsrud!

Back to Grimsrud Interaktiv