I was building a contact form a few weeks ago and since I use Firefox 3.6 to do my testing while I build a site, I didn’t noticed until I checked the site in Chrome that you can now resize text areas. If there’s a couple of diagonal lines in the bottom right corner of the text area, you can click and drag to resize it. Checking around, I’ve found this is only available in Chrome, Safari and Firefox 4 right now, but I’m sure that when Internet Explorer 9 comes out, it will be there too. Is this a big deal? Maybe not, but when you resize the text area if can affect the design around it, moving text and pictures around. And I know from experience, that’s the kind of thing that can become a major issue for some of the clients I’ve worked it, if they happened to discover you can do that.
But this is an easy problem to solve. I usually set the height and width of form elements in my CSS. But there’s a couple of tricky things you should know. If you just set this:
1 2 3 4 | textarea { width:400px; height:300px; } |
It will set the height and width of the text area but it will let the visitor make it bigger although not smaller. You have to set the max-height and max-width as well. If you just set the max-height or max-width, the visitor can resize the text area from the default width to the max-width you’ve set and the same with height. So both need to be set in order to prevent any resizing:
1 2 3 4 5 6 | textarea { width:400px; height:300px; max-width:400px; max-height:300px; } |
So far, I haven’t been able to find any info on preventing resizing with a setting inside the actual HTML tag, but since CSS is used nearly 100% time, it’s not a big deal to do it this way.