How to restrict max textarea width and height in chrome or how to disable textarea resizing

Question

Chrome allowed to resize text area by drugging that on the bottom right corner, but some times this movement may break design of the page, so i am wondering how to restrict the max and min width for that action of how to disable that function at all with thml/javascript/css on the page?

Privileged

you can use CSS - max-width and max-height – Faustina

You shouldn't use resize: none unless you absolutely must. It's really very annoying indeed not to be able to resize tiny little textareas. – Capetian

Answer 1

You can disable re-sizing it with the following css:

resize: none;

Forage

Answer 2

you can use :

resize: vertical; 
max-height: 200px;

Peon

the best solution for me! – Wheen

This should be the selected answer. Disabling the resizing completely is really frustration for the user, you should be able to at-least resize vertically to some extent/ – Politesse

I'm here because that doesn't work. Using material design matInput (Angular) – Optic

Answer 3

You can also restrict to horizontal resizing only with:

resize: horizontal;

and only vertical resizing with:

resize: vertical; 

Flabellum

Answer 4

This is all a matter of CSS. To disable the resizing (drag thumb) just use resize: none;. To restrict size max(min)-width and height should do the trick.

Birkner

Answer 5

textarea.vertical {
  resize: vertical;
  max-height: 130px;
  min-height: 80px;
}

textarea.horizontal {
  resize: horizontal;
  max-width: 130px;
  min-width: 80px;
}

<p>Horizontally resizable textarea</p>
<textarea type="text" class="horizontal"></textarea>
<br>
<p>Vertically resizable textarea</p>
<textarea type="text" class="vertical"></textarea>

You can set the resize property as horizontal and vertical or set it as default(the user can stretch in both ways).

If you are setting resize: horizontal then you need to add the additional property as max-width:200px;

If you are setting resize: vertical then you need to add the additional property as max-height:200px;

Faze

Your code snippet pertaining to horizontal resizing doesn't seem to work. – Anatole

@mishsx You need to increase the max-width of a textarea in order to stretch it more. I just have provided the sample width – Faze

Answer 6

you can use

resize:none

to restrict the resizing of a textarea.

Tiffaneytiffani