Turn off resize textarea in Chrome & Safari
Chrome Textarea
There is a new feature in both Safari and Chrome that allows a textarea to be resized by the user. In both browsers the feature is seen by a little icon that is in the bottom right corner of the textarea. This feature gives the user the ability to choose how much space they need for whatever it is they are writing.
For some websites this new feature may not be desired as resizing the textarea could break the layout of the website. I can think of a few ways to prevent the layout from breaking.
- Design the page with a liquid layout
- Turn off the users ability to resize the textarea
- Give the textarea a max size
Redesigning the site with a liquid layout can be a lot of work and may not be optimal for the look & feel for the site. Many designers prefer to lock the site at a certain width to guarantee that everyone will see a website that looks exactly the same.
It is very easy to turn off the users ability to resize the textarea. Turning this feature off may be necessary due to the design of certain sites or to make it harder for the user to write a 100 page document in a small comment box. The following CSS can be used to remove the users ability to resize the textarea:
textarea{resize: none}
Place that code in your css file to remove the users ability to resize any textarea on the site. You could also remove it from 1 textarea on a page with inline css.
The third option of giving the textarea a max size has a similar solution of using css. The two properties that can be used are max-width and max-height. This will give the user the ability to resize the textarea but limit them to a certain max size. The css would look something like the following.
textarea{max-width: 100px; max-height: 100px;}
Of course you may only want to use one of the above properties to allow the user to grow the height to any size but not resize the width or vice versa.
An example of a site that could use one of the above steps is whitehouse.gov. There are two screen shots below that show the before and after of the user resizing the textarea.
Browsers giving the user the ability to resize a textarea is a great feature but it creates one more item that designers and developers need to be aware of when adding a textarea to a page.
Before
After
March 18th, 2009 at 6:48 am
Thank you very much! Very helpful info.
April 6th, 2009 at 3:55 am
Very nice, thanks for the help…!!
June 19th, 2009 at 2:13 am
Thanks a lot!
It worked.
One more help needed
How to remove yellow highlight in chrome?
June 25th, 2009 at 5:21 pm
Thank you very much. Worked like a charm. Now I've finally fixed my registration form.
July 4th, 2009 at 9:24 am
thanks a lot. what an annoying "feature". :)
July 31st, 2009 at 12:44 pm
Thanks for the help.
However, I had a little bit of difficulty. Using Chrome 2.0.172.37, implementing either the max-height and max-width values equal to the original dimensions of the textarea somehow only led to the textarea being resizeable in one direction (horizontally, if the max-width was the first declaration in the code or vertically if max-height came first). And when only putting in the resize: none; to the style (not maximum dimension values), the textarea was resizeable. But when adding both the resize: none; and maximum dimension values, the textarea remained fixed.
Here's my code:
#note_edit_pane{
width: 600px;
height: 450px;
resize: none;
max-width: 600px;
max-height: 450px;
}
….
After messing around a bit more with the code, it appears as if the html comment makes the next line of code be ignored. Using a css comment /* */, however, it fixes the problem. d'oh.
On a side note, I'm writing this post in chrome in a text area, that ironically, can be resized to the extent that it breaks the page.
October 4th, 2010 at 2:56 am
Thanks for da tip mate )
November 27th, 2010 at 3:58 pm
I wonder what the Chrome people were thinking (I wonder that quite often regarding programmers in general). Why would someone keep introduce invasive, nonsensical features without asking, like the resizable textarea, the yellow border around focused inputs (that's the decision of the web developer), or Chrome completely and silently ignoring popup windows.
February 1st, 2011 at 8:27 pm
@Brett: thanks, informative and balanced.
@Alexander and others like him: I'm not sure you know who's in command.
I guess, Google thought, stick with usability standards and let the user decide what they want to see and act on.
I agree that textareas should be useful and render properly from the start.
But I guess you've never seen a ridiculously small web mail or comment field.
Same for popups. Why a popup rather than a proper new tab? I agree insofar as I'd prefer a proper warning that the site's trying irritating things.
Next in line: resizable windows, hiding controls.
Actually, those are some of the reasons why I prefer Gmail over my former and some mail providers.
And for the record: each of my browsers does some 'hideous' stuff to Google's sites and yours.
March 17th, 2011 at 2:10 am
@ Danish Backer:
How to remove yellow highlight in chrome?
textarea { outline: none; }
April 2nd, 2011 at 3:17 am
this article help me alot … i thought to much how to disable textarea resize … but it`s only a line to stop it ….
thank you ..
April 9th, 2011 at 1:59 am
And Firefox. Wow, I found my answer on the very first Google. Thanks for the quick and easy solution.
Now, how much for a PayPal app for parallel payments? I want to direct a percentage of every purchase from my sites to the ASPCA.
Reading over your site and blog is sooo humbling!
Thanks again.
May 5th, 2011 at 2:10 pm
Very useful. Thank you very much.
June 27th, 2011 at 12:26 pm
I found a site that has an example of a jquery sexy liquid textarea
http://www.ajaxera.com/jquery-sexy-tools-textarea/
July 5th, 2011 at 9:56 pm
Thank you!
July 14th, 2011 at 7:49 am
I hope not too many people follow the "resize: none" route. Why give less functionality and usability to your users?
Textareas are supposed to be used when a long text string needs to be written (for example, a contact form), and I hate writing a long text in a tiny letterbox area with only 3 or 4 lines visible at a time (similarly, I find incredibly cumbersome to read terms & conditions in a similarly sized area, and most of them are like that; no wonder nobody reads it!). Specially I hate it when I have a large 24 inch monitor, but still I have to be constrained to writing in a ridiculously tiny space.
I think the best compromise is using ONLY the "max-width" attribute to constrain what the user can resize. That way, resizing the textarea horizontally won't break your great CSS layout, but still the user can resize vertically to accomodate more text without the need to scroll. If you use a liquid layout, and any good CSS designer should, if should be no problem to have a vertically resizable textarea.
August 5th, 2011 at 7:48 am
Yes, I was wondering about that feature. Thanks! :)
August 31st, 2011 at 10:29 pm
cool thanks
September 6th, 2011 at 2:21 pm
But this code works on Firefox too, right?
September 20th, 2011 at 8:24 pm
Very good tips, unfortunately half of this planet still uses i.e while using internet, so this is not crossbroweser, meaning that a lot of users will still be able to resize the textarea changing the content flow of the entire page
September 21st, 2011 at 12:11 pm
@enrico IE does not give the user the option to re-size the textarea so this solution is not needed for IE.
October 1st, 2011 at 8:00 pm
Thank you very much.
You solved my problems.
It's very useful. ^^"
October 4th, 2011 at 6:45 am
Thanks for the tip!!
December 14th, 2011 at 11:38 pm
Thanks! It even worked for Mozilla Firefox!! :)
January 16th, 2012 at 8:53 am
Thank you so much..
it worked for Mozilla Firefox as well!! :))