How do I disable the resizable property of a textarea?

HtmlCss

Html Problem Overview

I want to disable the resizable property of a textarea.

Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?

Enter image description here

Html Solutions

Solution 1 - Html

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

To disable it for some (but not all) textareas, there are a couple of options.

You can use class attribute in your tag(<textarea class="textarea1">):

.textarea1 {
  resize: none;
}

To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>):

textarea[name=foo] {
  resize: none;
}

Or, using an id attribute (i.e., <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

> ### Super important to know: > This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll; > > Quote by Sara Cope, > http://css-tricks.com/almanac/properties/r/resize/

Solution 2 - Html

In CSS ...

textarea {
    resize: none;
}

Solution 3 - Html

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

Enter image description here

  • Firefox 17.0.1

Enter image description here

  • Chrome

Enter image description here

Solution 4 - Html

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.

Solution 5 - Html

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

Solution 6 - Html

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

Solution 7 - Html

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.

Solution 8 - Html

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.

Solution 9 - Html

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

Solution 10 - Html

You can simply disable the textarea property like this:

textarea {
    resize: none;
}

To disable vertical or horizontal resizing, use

resize: vertical;

or

resize: horizontal;

Solution 11 - Html

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 */

See Demo

Solution 12 - Html

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

Solution 13 - Html

I have created a small demo to show how resize properties work. I hope it will help you and others as well.

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}


<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
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.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
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.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
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.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
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.
</textarea>

Solution 14 - Html

textarea {
  resize: none;
}

The code above will disable the resizable property of all <textarea/> elements in your project. If you want that that is fine, otherwise you would want to use a specific class for your textarea elements.

.not-resizable {
   resize: none;
}

In your HTML

<textarea class="not-resizable"></textarea>

Solution 15 - Html

Use this property resize: none;

textarea {
  resize: none;
}

Solution 16 - Html

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

Solution 17 - Html

You can try with jQuery also

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

Solution 18 - Html

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.

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

How do I clone a list so that it doesn't change unexpectedly after assignment?

PythonListReferenceCopyClone

Next Solution:

How do I format a date in JavaScript?

JavascriptDateDate Formatting

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser549757View Question on Stackoverflow
Solution 1 - HtmlDonutView Answer on Stackoverflow
Solution 2 - HtmlJeff ParkerView Answer on Stackoverflow
Solution 3 - HtmlRami JamlehView Answer on Stackoverflow
Solution 4 - HtmlJames SumnersView Answer on Stackoverflow
Solution 5 - HtmlImtiaz Ali BaigalView Answer on Stackoverflow
Solution 6 - HtmlyevgeniyView Answer on Stackoverflow
Solution 7 - HtmlThusitha WickramasingheView Answer on Stackoverflow
Solution 8 - HtmlAlirezaView Answer on Stackoverflow
Solution 9 - HtmlWebengView Answer on Stackoverflow
Solution 10 - Htmluser7122338View Answer on Stackoverflow
Solution 11 - HtmlOriolView Answer on Stackoverflow
Solution 12 - HtmlAbkView Answer on Stackoverflow
Solution 13 - HtmlAmbuj KhannaView Answer on Stackoverflow
Solution 14 - HtmlIsmoil ShokirovView Answer on Stackoverflow
Solution 15 - HtmlPriya MaheshwariView Answer on Stackoverflow
Solution 16 - HtmlCarlos de Jesus BaezView Answer on Stackoverflow
Solution 17 - HtmlSantosh KhalseView Answer on Stackoverflow
Solution 18 - HtmlkaeldsView Answer on Stackoverflow