[David Hoang]

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

[David Hoang]

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>

[David Hoang]

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>

[David Hoang]

Use this property resize: none;

textarea {
  resize: none;
}

[David Hoang]

you need to set the below CSS code in your component.css

textarea {
  resize: none;
}

[David Hoang]

You can disable resizeable property of textarea using textarea {resize: none;}

textarea {
   resize: none;
}

Demo

[David Hoang]

If anyone is looking for a way to this in plain Javascript:

textArea = document.createElement("textarea");
textArea_input.setAttribute("style","resize:none");

Note: Setting the style property this way will overwrite all your prior css style declarations.

[David Hoang]

Yes, you can disable the resizable property of a textarea using CSS. The following code will disable the resizable property of a textarea with the id my-textarea:

CSS Code:-

textarea#my-textarea {
  resize: none;
}

You can also disable the resizable property of all textareas on a page by adding the following code to your CSS stylesheet:

CSS Code:-

textarea {
   resize: none;
}

The resize property can have three values:

• none: The textarea cannot be resized.
• horizontal: The text area can only be resized horizontally.
• vertical: The text area can only be resized vertically.

The default value of the resize property is none.

In addition to using CSS, you can also disable the resizable property of a textarea using JavaScript. The following code will disable the resizable property of a textarea with the id my-textarea:

JavaScript Code:-

const textarea = document.getElementById('my-textarea');
textarea.style.resize = 'none';

This code will overwrite any CSS styles that have been applied to the textarea.

To reduce the size of a textarea, you can use the rows and cols attributes in the HTML code. The rows attribute specifies the number of rows in the textarea, and the cols attribute specifies the number of columns. For example, the following code will create a textarea with 10 rows and 50 columns:

HTML Code:-

<textarea rows="10" cols="50"></textarea>

You can also use CSS to set the size of a textarea. The following code will set the height and width of a textarea with the id my-textarea to 100px and 200px, respectively:

CSS Code:-

textarea#my-textarea {
  height: 100px;
  width: 200px;
}

[Author]

Posts