Controlling Safari & Chrome’s Resizable Textarea with Simple CSS
December 28, 2009 | Tags for this entry: CSS, web design, webkitThis 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.
By now, 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.
Let’s Do This
We’ll start by designing the layout of our form.
<ol id="form">
<li>
<label for="Name">Name</label>
<input type="text" name="Name" id="Name" /></li>
<li>
<label for="email">Email</label>
<input type="text" name="email" id="email" /></li>
<li>
<label for="comment">Question or Comment</label>
<textarea name="Comment" id="Comment" rows="5" cols="20"></textarea>
</li>
<li><input type="submit" value="Send" id="submit" name="submit" class="inputButton" /></li>
</ol>
Then we’ll add the CSS. We won’t get into specifics about the design. We can simply use these pre-defined styles.
#form {
margin: 0;
padding: 0;
}
#form label {
padding: 3px 10px 0 0;
margin: 0 0 3px 0;
display: block;
}
#form li {
margin: 0 0 5px 0;
padding: 0;
list-style: none;
}
#form input {
border: 1px solid #737272;
background: #EEE;
width: 175px;
}
#form textarea {
border: 1px solid #737272;
background: #EEE;
}
The above code leaves us with a set of form fields that looks roughly like this. You’ll notice that in Safari or Chrome, there is a gripper handle on the bottom right corner.
This resize handle allows the user to make the box taller or wider if they feel they need just a little more room to continue typing…even if it means disregarding the boundaries of our beautiful layout!
The Fix
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.
#form textarea {
border: 1px solid #737272;
background: #EEE;
width: 175px;
}
Our biggest concern is if the user makes the textarea
too big, though. So we’ll add a max-width
property.
#form textarea {
border: 1px solid #737272;
background: #EEE;
width: 175px;
max-width: 175px; /* RESTRICT SAFARI RESIZE */
}
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.
#form textarea {
border: 1px solid #737272;
background: #EEE;
width: 175px;
max-width: 175px; /* RESTRICT SAFARI RESIZE */
max-height: 250px; /* RESTRICT SAFARI RESIZE */
}
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.
Note: Defining rows and columns in your textarea
attributes also specifies a minimum width and height for the element. While necessary for maximum accessibility, these attributes alone do not allow you to control the display as precisely as CSS does.
Note: If you design allows room for it, you can also define a max-width that is larger than your textarea
‘s standard width to allow flexibility in horizontal sizing.
February 8th, 2010 at 6:48 am
I didnt realise that, thanks
April 11th, 2010 at 12:35 pm
the post
Controlling Safari & Chrome’s Resizable Textarea with Simple CSS
is very usefull. Nice work.
April 11th, 2010 at 12:38 pm
… and remember, this CSS is valid.
May 13th, 2010 at 4:49 pm
Lovely approach. And it’s nice to know max-height/max-width is honoured by Safari and Chrome. 😀
April 23rd, 2012 at 9:15 am
after resizing, is there a way to get the resisized row and column attributes?
i have tried the usual way but i keep getting the original values.
i have a pair of textareas and if 1 is resized i would like the other to be the same size.
any help would be appreciated.