Take control of safari’s resizable textareas
When Safari 3 was released as a beta about 2 months ago, it brought some cool features. One of them were the so-called “Resizable Text Fields”. What it means is that any textarea element can be resized by dragging its lower-right corner. This feature comes in handy when you have more text to input than the website author predicted. You can resize your field to avoid scrolling it. Great.
But as many web developers are aware, more freedom to the user means more worries to the designer. By resizing the text field, a user can affect the look of a website. Of course, a page should allow some customization, but what about extreme values (too small, too wide, …)? Will they make my website fall apart? Well, the good developers of Safari thought of that. Therefore textareas in Safari respect the CSS2 minimum and maximum widths and heights. For example, when a max-width of 300px is set, a user will still be able to resize the text field, but no wider than 300 pixels. Neat.
Another nifty thing we can use is the CSS3 resize property. This allows us to limit the resizing of an element (in this example, the textarea) to horizontal, vertical, or none. So by applying textarea { resize:vertical; } the user will be able to resize textareas vertically, but not horizontally.
A word of advice though - Resizable text fields were introduced to help the user. Even though we can prevent resizing all-together, it’s usually not a smart thing to do. Users like to use such features so don’t take this away from them. Do limit resizing within some reasonable values if you think it’s necessary, but don’t take it as an excuse for bad element positioning.
![[O]](http://farm5.static.flickr.com/4143/4831590274_cdd9c23718_s.jpg)
Hi, that’s an interesting discovery, thanks for sharing it.
I just saw your reply to the ‘CSS Lightbox without javascript article’, and thought I’d share how I’ve dealt with IE6 select elements being on top of overlays when using modal boxes.
I resorted to two simple functions, which I call when displaying or hiding the modal box:
function hideSelects()
{
// hide any select boxes
$ES(’select’).each(function(el){
el.setStyle(’display’, ‘none’);
});
return false;
}
function showSelects()
{
// show any select boxes
$ES(’select’).each(function(el){
el.setStyle(’display’, ‘inline’);
});
return false
}
This is using the MooTools javascript library, but could be adapted if you use another or no library.
Hope this is of use to you.
Just the info I was looking for. I completely agree that developers should limit this feature only if it’s absolutely necessary, but it is nice to know that I (the developer) can take control when I really need to.
I found that if the textarea is inside the element, it won’t work
Thanks for the tip, just wanted to point out that the axis restrictions (vertical or horizontal) do not work in safari 3.1.2. However I found a simple work-around, just set the max-width of the text area to the current width of the text-area.
Hope thats saved someone some time.