Good 0

Problem: my textarea has that little resize handle in the bottom right corner in browsers that have CSS 3 UI implemented (like Safari). How can I prevent it from being resizable? It's making it possible for the user to break my layout!

3 answers

joneff 28

Personally, I wouldn't worry if a user breaks something temporary on purpose. But anyway use this

textarea {resize: none;}

Works on Safari 3.


You could also check this page out -- -- it has some more info. For instance how to let resize, but just to a specific size say:

textarea {
    resize: none;
    max-width: 400px

I hope that helps.

Answered about 10 years ago by joneff
danwellman 5600

You can use this:

textarea { resize:none; } 

to prevent resizes and you can also set minimum and maximum widths I believe which will prevent users from breaking your layout :)

Answered about 10 years ago by danwellman

The effect of preventing resize may well be to drive the user (customer) away from your site. If users are aware that textareas can be resized in their browser, then the fact of them resizing the element would indicate that they believe it is too small. In which case they will expect layout to reflow and be accepting of that. Taking away their ability to do that will only annoy them. The odds of someone discovering the resizer for the first time on your site are infinitessimal. If for some reason the functionality of your site breaks if the layout flows differently, then you need to revisit your design choices, because there are plenty of circumstances other than resizing textareas which will cause the site to flow differently from your "standard" - e.g. 320px wide screens, minimum font sizes.

Answered about 10 years ago by Richard Grevers