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?

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. — thirtydot
– thirtydot, Commented Aug 26, 2011 at 13:39

Ouadie · Accepted Answer · 2014-04-23 22:10:05Z

39

you can use :

resize: vertical; max-height: 200px;

answered Apr 23, 2014 at 22:10

Ouadie

13.2k4 gold badges54 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

naxo8628 Over a year ago

the best solution for me!

ricks Over a year ago

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/

O-9 Over a year ago

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

Jeremy Lynch · Accepted Answer · 2013-07-24 08:44:12Z

You can also restrict to horizontal resizing only with:

resize: horizontal;

and only vertical resizing with:

resize: vertical;

MattW · Accepted Answer · 2011-08-26 12:31:29Z

21

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

resize: none;

answered Aug 26, 2011 at 12:31

MattW

13.2k5 gold badges42 silver badges65 bronze badges

Comments

Z. Zlatev · Accepted Answer · 2011-08-26 12:31:53Z

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.

Aniket Sharma · Accepted Answer · 2021-07-28 08:00:05Z

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;

Your code snippet pertaining to horizontal resizing doesn't seem to work.
@mishsx You need to increase the max-width of a textarea in order to stretch it more. I just have provided the sample width

Draken · Accepted Answer · 2017-01-03 07:44:56Z

2

you can use

resize:none

to restrict the resizing of a textarea.

edited Jan 3, 2017 at 7:44

Draken

3,19614 gold badges38 silver badges56 bronze badges

answered Jan 3, 2017 at 7:24

user2198974

213 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

Comments

Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

2 Comments

Comments

Linked

Related