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.
The answer is
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 ):
textarea[name=foo] {
resize: none;
}
Or by id (where the textarea HTML is ):
#foo {
resize: none;
}
Taken from: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/
It can done easy by just using html draggable attribute
<textarea name="mytextarea" draggable="false"></textarea>
Default value is true.
This is works for me
<textarea_x000D_
type='text'_x000D_
style="resize: none"_x000D_
>_x000D_
Some text_x000D_
</textarea>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";
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
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 */
this will do your job
textarea{
resize:none;
}
//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
Source: Stackoverflow.com