Patrick Foley’s Blog

When programming for Internet Explorer, you can greatly improve the usability of textareas by using the style overflow: visible;

I recently had a project that required a lot of textareas on a page. When there is a lot of information in each of these textareas, it causes an annoying visual “bunching” for the reader, because each textarea has its own scrollbar, even though the page itself already has a scrollbar. You’ve probably seen pages that look like this:

Here are multiple rows of information.

Here are multiple rows of information.

Here are multiple rows of information.

Now look at how much better it looks (and feels) if you add overflow: visible; to the textarea styles:

Here are multiple rows of information. no matter how much you type, it expands to fit. Try it! (it doesn’t work in Firefox) These are all editable textareas.

I like this approach better, because it let’s you use the browser’s toolbar.

Textareas with very little information take up no extra space.

Sadly, this technique doesn’t work with all browsers, but it doesn’t appear to hurt anything on other browsers, either. If you are building an intranet application on Internet Explorer, this simple tag can make a load of difference in page usability.

This entry was posted on Thursday, January 20th, 2005 at 4:18 pm and is filed under Business and Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.