• How to disable the resizable property of a textarea?
  • We can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.
    How we can disable this?

  • To disable textareas, we can tried the following.
css code
To disable a specific textarea with the name attribute set to wiki (i.e., <textarea name=“wiki"></textarea>)
textarea[name=wiki]
{
resize: none;
}

Using an id attribute (i.e., <textarea id=“wiki"></textarea>):
#wiki
{
resize: none;
}

  • The following CSS rule disables resizing behavior for textarea elements:
  • CSS :
css code
Textarea
{
resize: none;
}
[ad type=”banner”]

  • We can try this :
html code
<textarea style="resize:none" rows="10" placeholder="Enter Text" >
</textarea>

  • This is one of the best solution :
css code
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;
}

  • Html :
html code
<textarea name="textinput"    draggable="false"></textarea>

Default value is true for draggable attribute.
[ad type=”banner”]

  • CSS property:
resize: none;
  • you can use CSS inline style property :
html code
<textarea style="resize: none;"></textarea>
  • or in between <style>…</style> element tags
css code
textarea 
{
resize: none;
}

  • Try with jQuery also
javascript code
$('textarea').css("resize", "none");

  • To resize your textarea’s only horizontal or vertical,
css code
textarea { resize: vertical; }

textarea { resize: horizontal; }
  • Finally, resize: both enables the resize grabber.

  • Use the CSS3 resize(http://www.tutorialrepublic.com/css-reference/css3-resize-property.php) property to remove or turn-off the default horizontal and vertical resizable property of the HTML <textarea>(http://www.tutorialrepublic.com/html-reference/html-textarea-tag.php) element.
  • This property will also hide the resizing at the bottom-right corner of the textarea.
css code
textarea 
{
resize: none;
}
[ad type=”banner”]

  • Specify that a <div> element should be resizable by the user:
css code
div 
{
resize: both;
overflow: auto;
}

  • you can resize by restrictions i.e. none, both, horizontal, vertical, and inherit.
  • For below code, user can resize vertically, but the width is fixed.
css code
textarea 
{
resize: vertical;
}

Categorized in: