227

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?

Jon Kyte
  • 1,962
  • 3
  • 26
  • 40
Mo.
  • 26,306
  • 36
  • 159
  • 225
  • 1
    Possible duplicate of [How to disable resizable property of textarea?](https://stackoverflow.com/questions/5235142/how-to-disable-resizable-property-of-textarea) – mtpultz Mar 07 '19 at 21:56

5 Answers5

420

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

oxmolol
  • 125
  • 1
  • 1
  • 10
Mo.
  • 26,306
  • 36
  • 159
  • 225
  • Awesome! If you don't want to mess with min-width, you can use the `rows=""` attribute to define a specific height in numbers. – Victor Eke Apr 03 '23 at 17:48
52

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; } 
Marc
  • 16,170
  • 20
  • 76
  • 119
11

You can put this in the CSS file:

textarea {
  resize: none;
} 
Stelian Matei
  • 11,553
  • 2
  • 25
  • 29
6

disable horizontal and vertical with limit

textarea { 
    width:100%;
    resize:vertical; 
    max-height:250px; 
    min-height:100px; 
}
ApsaraAruna
  • 136
  • 2
  • 13
0

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.

AmerllicA
  • 29,059
  • 15
  • 130
  • 154