[Solved – 11 Answers] How to disable resizable property of textarea

PROBLEM

• 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?

SOLUTION 1:

• To disable textareas, we can tried the following.

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;
}

SOLUTION 2:

• The following CSS rule disables resizing behavior for textarea elements:

• CSS :

Textarea
{
    resize: none;
}

SOLUTION 3:

• We can try this :

<textarea style="resize:none" rows="10" placeholder="Enter Text" >
</textarea>

SOLUTION 4:

• This is one of the best solution :

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;
}

SOLUTION 5:

• Html :

<textarea name="textinput"    draggable="false"></textarea>

Default value is true for draggable attribute. 

SOLUTION 6:

• CSS property:

resize: none;

• you can use CSS inline style property :

<textarea style="resize: none;"></textarea>

• or in between <style>…</style> element tags

textarea 
{
    resize: none;
}

SOLUTION 7:

• Try with jQuery also

$('textarea').css("resize", "none");

SOLUTION 8:

• To resize your textarea’s only horizontal or vertical,

textarea { resize: vertical; }

textarea { resize: horizontal; }

• Finally, resize: both enables the resize grabber.

SOLUTION 9:

• 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.

textarea 
{
    resize: none;
}

SOLUTION 10:

• Specify that a <div> element should be resizable by the user:

div 
{
    resize: both;
    overflow: auto;
}

SOLUTION 11:

• 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.

textarea 
{
resize: vertical;
}