Textarea - Disable Resize on X or Y

How do I disable the resizable property of a textarea?

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

To disable it for some (but not all) textareas, there are a couple of options.

You can use class attribute in your tag(<textarea class="textarea1">):

.textarea1 {
  resize: none;
}

To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>):

textarea[name=foo] {
  resize: none;
}

Or, using an id attribute (i.e., <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Quote by Sara Cope,
http://css-tricks.com/almanac/properties/r/resize/

How to disable textarea resizing?

You can use css

disable all

textarea { resize: none; }

only vertical resize

textarea { resize: vertical; }

only horizontal resize

textarea { resize: horizontal; } 

disable vertical and horizontal with limit

textarea { resize: horizontal; max-width: 400px; min-width: 200px; }

disable horizontal and vertical with limit

textarea { resize: vertical; max-height: 300px; min-height: 200px; }

I think min-height should be useful for you

How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

To disable resizing completely:

textarea {
    resize: none;
}

To allow only vertical resizing:

textarea {
    resize: vertical;
}

To allow only horizontal resizing:

textarea {
    resize: horizontal;
}

Or you can limit size:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

To limit size to parents width and/or height:

textarea {
    max-width: 100%; 
    max-height: 100%;
}

Disable resizing of textarea with SimpleMDE

Try setting a max-width like this:

 .padd_box_top1 {
     max-width: 40%;
 }

This will prevent the textarea from enlarging, if you want a min-width as well you can add that too, just add: min-width: 25%;
Change the amount of pixels to whatever you like.

---

Related Topics