Turn off resize textarea in Chrome & Safari

by Brett on February 23, 2009

Chrome Textarea

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.

  1. Design the page with a liquid layout
  2. Turn off the users ability to resize the textarea
  3. 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

Before

After

After

  • Thank you very much! Very helpful info.

  • Very nice, thanks for the help…!!

  • Thanks a lot!
    It worked.

    One more help needed
    How to remove yellow highlight in chrome?

  • Thank you very much. Worked like a charm. Now I’ve finally fixed my registration form.

  • thanks a lot. what an annoying “feature”. :)

  • Jotun

    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.

  • Efe Buyuran

    Thanks for da tip mate )

  • 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.

  • @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.

  • Bob Kruithof

    @ Danish Backer:

    How to remove yellow highlight in chrome?
    textarea { outline: none; }

  • 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 ..

  • 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.

  • Jethro123

    Very useful. Thank you very much.

  • Michael

    I found a site that has an example of a jquery sexy liquid textarea

    http://www.ajaxera.com/jquery-sexy-tools-textarea/

  • Rute

    Thank you!

  • OMA

    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.

  • Felipe Mota

    Yes, I was wondering about that feature. Thanks! :)

  • Beraki

    cool thanks

  • Felipe Mota

    But this code works on Firefox too, right?

  • enrico

    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

  • Thank you very much.
    You solved my problems.
    It’s very useful. ^^”

  • Germán

    Thanks for the tip!!

  • Thanks! It even worked for Mozilla Firefox!! :)

  • Thank you so much..
    it worked for Mozilla Firefox as well!! :))

  • Eddie Brewer

    Thank you so much, I’d like to inform you if you didn’t already know.
    This works on all browsers! (:
    Thank you sooo much!

  • sohaib

    thank you soo much :)

  • Thanks so much Brett, you save me for hours of nonsense research. Please keep yourself involve in posting good solutions like this one :)

  • Baburao

    Thank you so much!!!!

  • Cris

    Thank you so so much!!

  • Prashanth Gade

    it’s very useful, Thank you so much!

  • very nice. I am a learner css and this is really helpful for me. thanks a lot for nice informative blog

  • mohid_ist

    thanks lot it works on firefox browser !!

  • Elham

    Cool,Thanks

  • Muthu

    Thank you very much Yar!

    It’s Working……….

  • Thanks you for sharing, works like a charm. Great work.

  • If you like to restrict the size only horizontally, while maintaining a responsive layout, you would to the property as follows:

    max-width: 100%;
    min-width: 100%;

    Cheers,

  • Great tip and well explained! – (works in Firefox also – although not specified in the post.) – cheers.

  • Manoj Gupta

    thanks a lot .. its working..

  • THANKS A MILLLLLLLL!!!!!

  • Thanks Brett, that’s a nice solution. :)

  • Umair Hafeez Mughal

    Very nice and helpful :-)

    Thank you Brett.

  • LP

    Thank You very much…..
    it helped me a lot…

    am struglling form last 2hr’s on this resizing

  • madhavan

    Thank u very much saved my hrs of searching

  • Thank yo so much that was really usefull to me

  • Haziel

    Well my friend you are awesome, this helped me with some forms i had to add, this was ruining it completely, i added the resize:none; to my css and worked like a clock, thanks a lot

  • Timesaviour :)

  • abhijeet

    thanks.

  • richard

    In the example screen, I would also consider using
    resize:vertical
    so that the textarea can be resized down the page.

  • a.radwan

    Oooh my God,
    All of this article for — resize: none

Previous post:

Next post: