The answer is
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 textareas:
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;
}
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.
In reactjs, you can disable the resize widget using style props.
<textarea id={"multiline-id"} ref={'my-ref'} style={{resize: "none"}} className="text-area-additional-styles" />
You can simply disable the textarea property like this:
textarea {
resize: none;
}
To disable vertical or horizontal resizing, use
resize: vertical;
or
resize: horizontal;
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.
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
- Firefox 17.0.1
- Chrome
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
In CSS ...
textarea {
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.
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;" })
I have created a small demo to show how resize properties work. I hope it will help you and others as well.
.resizeable {_x000D_
resize: both;_x000D_
}_x000D_
_x000D_
.noResizeable {_x000D_
resize: none;_x000D_
}_x000D_
_x000D_
.resizeable_V {_x000D_
resize: vertical;_x000D_
}_x000D_
_x000D_
.resizeable_H {_x000D_
resize: horizontal;_x000D_
}<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">_x000D_
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book._x000D_
</textarea>_x000D_
_x000D_
<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">_x000D_
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book._x000D_
</textarea>_x000D_
_x000D_
<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">_x000D_
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book._x000D_
</textarea>_x000D_
_x000D_
<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">_x000D_
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book._x000D_
</textarea>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; }
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.
You can try with jQuery also
$('textarea').css("resize", "none");
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;
}
Source: Stackoverflow.com