How do I disable the resizable property of a textarea?

Published

13 Dec 2022

Textarea resizing is a helpful UX feature when users are looking to post significant-sized content. As a general rule, you should allow resizing unless there is a specific reason or need to do so to accommodate your design.

When an element is resizeable, it has a little UI handle on a lower corner. The handle appears on the right on page elements when the page’s direction is set to ltr (left-to-right), and on the left on rtl (right-to-left) pages.

The CSS3 resize property controls if and how the user can resize an element by clicking and dragging the bottom right corner (on left-to-right page direction) of the element.

textarea resize handle

There are four allowable values for the resize property that are pretty self-explanatory:

  • none: the textarea is not resizeable.
  • both: The user can resize both the textarea height and width.
  • vertical: The user can resize the textarea height.
  • horizontal: The user can resize the textarea width.
css
.defaultResizing { resize:both; }.noResizing { resize:none; }.verticalOnlyResizing { resize:vertical; }.horizontalOnlyResizing { resize:horizontal; }

example resizing restriction classes

Instead of completely disabling resizing, it's often better practice to constrain the amount of resizing a user can do with the max-height, max-width, min-height, and min-width CSS properties.

css
.mixMaxVerticalResize {     resize:vertical;    min-height:100px;    max-height:500px;}

constrain rezize to within a min and max height.

Share this article:
XXLinkedInFacebookFacebookWhatsAppWhatsAppBlueskyBlueskyRedditRedditEmail

Similar articles