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!

2 answers

14
points

You can use the following CSS for this:

textarea {
    resize: none;
}

If you want to limit the resizing to only vertical or horizontal, simply use:

textarea {
    resize: vertical;
}
textarea {
    resize: horizontal;
}

Lastly, use the value "both" for the default, which makes it resizable all over your page unless you specify max-width and max-height.

Answered over 7 years ago by Faruk Ate?
12
points

The first answer is correct, but please don't do this. Set a sane default size that fits well within the layout, but don't force users to use the size you think is adequate. You have no idea what the needs of every individual user are.

  • I might want to paste a big comment into the field and edit it, in which case the size you define might not be large enough to see as much as I want.
  • I might not be able to see very well and so I have my browser's font set larger than normal, which means less text would fit in your textarea. Perhaps it's set large enough that only a few words fit, and I need more.

There are more possibilities, I'm sure. Make your layout look pretty but please don't punish the people who need the extra functionality.

Answered over 7 years ago by Steve Losh
  • So why don't you edit your comment before pasting it into the field? If you paste it anyways from elsewhere? Formfields with Background Images appear awkward when you resize. and sine not all Browsers support broder-radius you may want to ad Borderradius with an image, well the image won't resize that easy. ok you can put some JS in, but is it really worth it to make the Site bigger just for that? Marcel about 7 years ago