How To Restrict Safari & Chrome To Resize The Textarea

As we know, most web surfers are aware that as of Safari 3, the Webkit engine (which also powers Google Chrome) introduced a new feature: the user-resizable textarea. This feature was very welcome to those who are familiar with accessibility and web usability. Allowing a user to resize the textarea instead of simply relying on the scrollbars is just all-around good UI design.

However, it presents a new layout problem that we’ve never really had to deal with before. Since the user can resize the text box, they could end up seeing a broken version of your original form. While this doesn’t hurt anything at all, since the user is the one who initiates the resizing (and not some CSS or Javascript), their experience isn’t harmed.

But, like most designers, I’m sure you’d like to maintain some level of control over the page layout. So we’ll use some very simple CSS to control its behavior.

This article shows you how to get a “handle” on Webkit’s resizable textarea by managing its resize area without disabling the feature, as some have proposed.

Since we want the textarea to match the width of the other input values, we’ll add a width. This also keeps the textarea from being resized to a width that is smaller than that which is defined for our layout.

1
2
3
4
5
#form textarea {
border: 1px solid #737272;
background: #EEE;
width: 600px;
}

The code above, if we run it in Google Chrome or Safari, the user always could resize our textarea more than its width 600px. See the illustration below:

Okey then, our biggest concern is if the user makes the textarea too big, though. So we’ll add a max-width property.

1
2
3
4
5
6
7
#form textarea {
border: 1px solid #737272;
background: #EEE;
width: 600px;
/* RESTRICT CHROME AND SAFARI RESIZE */
max-width: 600px;
}

Now, our textarea is only resizable vertically. This is nearly complete for our example, but we don’t want the user to be able to resize infinitely. It’s fun to play around with, but it looks pretty silly. To stop that from happening, we define a max-height that we think will give our users the flexibility that they’ll need if they want more space to type in.

1
2
3
4
5
6
7
8
#form textarea {
border: 1px solid #737272;
background: #EEE;
width: 600px;
/* RESTRICT CHROME AND SAFARI RESIZE */
max-width: 600px;
max-height: 250px;
}

Now, with all of the proper CSS in place, we avoid disabling features that users may find helpful, while maintaining the layout that we intended when designing the site.

➤