CODEWITHSUNDEEP
htmlcssresizetextarea
Mo.
Mo.

Reputation: 27503

How to disable textarea resizing?

I need to disable textarea horizontal resize. Sometimes I want to allow vertical resize on the textarea.

Whenever I create a contact us page the textarea is making my design ugly.

could any one give me a solution to disable it please?

Upvotes: 240

Views: 183480

Answers (5)

Mo.
Mo.

Reputation: 27503

You can use CSS.

Disable all:

textarea { resize: none; }

Only vertical resize:

textarea { resize: vertical; }

Only horizontal resize:

textarea { resize: horizontal; }

Disable vertical and horizontal with limit:

textarea { resize: horizontal; max-width: 400px; min-width: 200px; }

Disable horizontal and vertical with limit:

textarea { resize: vertical; max-height: 300px; min-height: 200px; }

I think min-height should be useful for you.

Upvotes: 443

AmerllicA
AmerllicA

Reputation: 32727

For textarea I used width: 500px !important and height: 350px !important, so this CSS codes prevent user resize, but if you have other tags you must use resize: none, for complete explanations read This Link.

For example, for a p tag you must set overflow property with a value that is not visible and then set resize, none, both, vertical, horizontal.

Upvotes: 0

ApsaraAruna
ApsaraAruna

Reputation: 136

disable horizontal and vertical with limit

textarea { 
    width:100%;
    resize:vertical; 
    max-height:250px; 
    min-height:100px; 
}

Upvotes: 6

Marc
Marc

Reputation: 16522

With some css like this

textarea
{
   resize: none;
}

Or if you want only vertical

textarea { resize:vertical; }

Or horizontal

textarea { resize:horizontal; }

or both ( not your case)

textarea { resize:both; }

Upvotes: 53

Stelian Matei
Stelian Matei

Reputation: 11623

You can put this in the CSS file:

textarea {
  resize: none;
}

Upvotes: 11

Related Questions