Turn off textarea resizing
HtmlTextareaHtml Problem Overview
I'm trying to turn off textarea resizing in my site; right now I'm using this method:
.textarea {
clear:left;
min-width: 267px;
max-width: 267px;
min-height:150px;
max-height:150px;
}
I know that my method is not correct and I'm searching for a better one in JavaScript. I'm a beginner, so the best solution for me will be HTML5 or jQuery.
Html Solutions
Solution 1 - Html
Try this CSS to disable resizing
The CSS to disable resizing for all textareas looks like this:
textarea {
resize: none;
}
You could instead just assign it to a single textarea by name (where the textarea HTML is
Solution 2 - Html
this will do your job
textarea{
resize:none;
}
Solution 3 - Html
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 */
Solution 4 - Html
Just one extra option, if you want to revert the default behaviour for all textareas in the application, you could add the following to your CSS:
textarea:not([resize="true"]) {
resize: none !important;
}
And do the following to enable where you want resizing:
<textarea resize="true"></textarea>
Have in mind this solution might not work in all browsers you may want to support. You can check the list of support for resize
here: http://caniuse.com/#feat=css-resize
Solution 5 - Html
This is works for me
<textarea
type='text'
style="resize: none"
>
Some text
</textarea>
Solution 6 - Html
As per the question, i have listed the answers in javascript
By Selecting TagName
document.getElementsByTagName('textarea')[0].style.resize = "none";
By Selecting Id
document.getElementById('textArea').style.resize = "none";
Solution 7 - Html
It can done easy by just using html draggable attribute
<textarea name="mytextarea" draggable="false"></textarea>
Default value is true.
Solution 8 - Html
//CSS:
.textarea {
resize: none;
min-width: //-> Integer number of pixels
min-height: //-> Integer number of pixels
max-width: //-> min-width
max-height: //-> min-height
}
above code works on most browsers
//HTML:
<textarea id='textarea' draggable='false'></textarea>
do both for it to work on the maximum number of browsers