Home How to disable resizable property of textarea?
Reply: 13

How to disable resizable property of textarea?

user549757
1#
user549757 Published in 2011-03-08 16:15:40Z

I want to disable the resizable property of a textarea.

Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?

Kip
2#
Kip Reply to 2015-01-26 14:24:56Z

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.

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 Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/

Jeff Parker
3#
Jeff Parker Reply to 2011-03-08 16:17:54Z

In CSS ...

textarea {
    resize: none;
}
James Sumners
4#
James Sumners Reply to 2014-01-02 13:45:55Z

CSS3 has a new propery for UI elements that will allow you to do this. The property is the resize property. So you would add the following to your stylesheet to disable resizing of all textarea elements:

textarea { resize: none; }

This is a CSS3 property; use a compatibility chart to see browser compatibility.

Personally, I would find it very annoying to have resizing disabled on textarea elements. This is one of those situations where the designer is trying to "break" the user's client. If your design can't accommodate a larger textarea, you might want to reconsider how your design works. Any user can add textarea { resize: both !important; } to their user stylesheet to override your preference.

Rami Jamleh
5#
Rami Jamleh Reply to 2012-12-27 20:58:33Z

I found 2 things

first

textarea{resize:none}

this is a css3 which is not released yet compatable with Firefox4+ chrome and safari

another format feature is to overflow:auto to get rid of the right scrollbar taking into account dir attribute

code and different browsers

Basic html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Some browsers

  • IE8

  • FF 17.0.1

  • chrome

Imtiaz Ali Baigal
6#
Imtiaz Ali Baigal Reply to 2013-11-06 09:19:04Z
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
kaelds
7#
kaelds Reply to 2014-02-03 19:07:36Z

Adding !important makes it work:

width:325px !important; height:120px !important; outline:none !important;

outline is just to avoid the blue outline on certain browser

yevgeniy
8#
yevgeniy Reply to 2015-02-12 12:14:27Z

If you need deep support you can use old school technique

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}
Thusitha
9#
Thusitha Reply to 2015-07-22 03:43:06Z

This can be do in html easy

<textarea name="textinput" draggable="false"></textarea>

This works for me. Default value is true for draggable attribute.

Oriol
10#
Oriol Reply to 2015-11-01 20:58:45Z

CSS3 can solve this problem. Unfortunately it's only supported on 60% of used browsers nowadays.

For IE and iOS you can't turn off resizing but you can limit the textarea dimension by setting its width and height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

See Demo

Webeng
11#
Webeng Reply to 2016-06-12 10:43:26Z

GREAT QUESTION! To disable the resize property, use the following CSS property:

resize: none;
  • You can either apply this as an inline style property like so:

    <textarea style="resize: none;"></textarea>
    
  • or in between <style>...</style> element tags like so:

    textarea {
        resize: none;
    }
    
Abk
12#
Abk Reply to 2016-10-25 08:19:12Z

To disable resize for all textarea

textarea {
    resize: none;
}

To disable resize for a specific textarea Add an attribute name or an id and set it to something. In this case, it is named noresize

<textarea name='noresize' id='noresize'> </textarea>

CSS

/*  using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */

#noresize{
resize: none;
}
Santosh Khalse
13#
Santosh Khalse Reply to 2016-12-15 08:15:16Z

You can try with jQuery also

$('textarea').css("resize", "none");
Alireza
14#
Alireza Reply to 2017-06-03 18:15:53Z

You simply use: resize: none; in your CSS.

The resize property specifies whether or not an element is resizable by the user.

Note: The resize property applies to elements whose computed overflow value is something other than "visible".

Also resize not supported in IE at the moment.

Here are different properties for resize:

No Resize:

textarea { 
  resize: none; 
}

Resize both ways (vertically & horizontally):

textarea { 
  resize: both; 
}

Resize vertically:

textarea { 
  resize: vertical; 
}

Resize horizontally:

textarea { 
  resize: horizontal; 
}

Also if you have width and height in your CSS or HTML, it will prevent your textarea be resized, with a broader browsers support.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.31091 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO