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?
https://i.stack.imgur.com/xrfWQ.png
The following CSS rule disables resizing behavior for textarea
elements:
textarea {
resize: none;
}
To disable it for some (but not all) textarea
s, 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/
In CSS ...
textarea {
resize: none;
}
I found two things:
First
textarea{resize: none}
This is a CSS 3, which is not released yet, compatible with Firefox 4 (and later), Chrome, and Safari.
Another format feature is to overflow: auto
to get rid of the right scrollbar, taking into account the 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
Internet Explorer 8
https://i.stack.imgur.com/IObIu.png
Firefox 17.0.1
https://i.stack.imgur.com/Xr3ub.png
Chrome
https://i.stack.imgur.com/VxYgY.png
CSS 3 has a new property 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 CSS 3 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.
texarea
and ends up making something not work
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
If you need deep support, you can use an 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;
}
resize:none
with this solution to prevent the handle appearing in the bottom corner which frustratingly doesn't work.
This can be done in HTML easily:
<textarea name="textinput" draggable="false"></textarea>
This works for me. The default value is true
for the draggable
attribute.
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 Internet Explorer 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.
To disable the resize property, use the following CSS property:
resize: none;
You can either apply this as an inline style property like so:
or in between element tags like so: textarea { resize: none; }
You can simply disable the textarea property like this:
textarea {
resize: none;
}
To disable vertical or horizontal resizing, use
resize: vertical;
or
resize: horizontal;
Use this property resize: none;
textarea {
resize: none;
}
CSS 3 can solve this problem. Unfortunately it's only supported on 60% of used browsers nowadays.
For Internet Explorer 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 */
To disable resize for all textarea
s:
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
HTML
<textarea name='noresize' id='noresize'> </textarea>
CSS
/* Using the attribute name */
textarea[name=noresize] {
resize: none;
}
/* Or using the id */
#noresize {
resize: none;
}
I have created a small demo to show how resize properties work. I hope it will help you and others as well.
.resizeable { resize: both; } .noResizeable { resize: none; } .resizeable_V { resize: vertical; } .resizeable_H { resize: horizontal; }
textarea {
resize: none;
}
The code above will disable the resizable property of all <textarea/>
elements in your project. If you want that that is fine, otherwise you would want to use a specific class for your textarea elements.
.not-resizable {
resize: none;
}
In your HTML
<textarea class="not-resizable"></textarea>
With @style
, you can give it a custom size and disable the resize feature (resize: none;)
.
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
You can try with jQuery also
$('textarea').css("resize", "none");
Adding !important
makes it work:
width:325px !important; height:120px !important; outline:none !important;
outline
is just to avoid the blue outline on certain browsers.
!important
attribute. Meaningless to fix the width & height if CSS attribute resize: none
can remove the resize feature
!important
evil?
Success story sharing