fix textarea height size

Question

I hope you can help me, I'm junior in html/css

I have a textarea with known height in percentage value inside a div of unknown height, when I'm trying to write inside this textarea, it's height get changed.

my question is, how to fix textarea height when trying to write inside it by percentage value

I know that I need to fix div height first by specify its height using px or % in order to make textarea height fix.

I tried these attributes but no luck

resize: none;
display:block;

Please note that the div height is changeable and it works as container for multiple textarea so that I can't add a specific height for it,

BTW, this issue is happening on all browsers

Please help

Answer 1

CSS rule resize: none; does this job.

You can also set your textarea height in rows count with rows attribute.

textarea {
  resize: none;
}
textarea.ta10em {
  height: 10em;
}

<div>
  <textarea rows=3>Some text
Second line
Third line</textarea>
</div>
<div>
  <textarea class="ta10em">Some text
Second line</textarea>
</div>

Answer 2

first of all. make sure there is no style in your html conflict with you css .

that can cause same problem

• for all textarea :

  textarea {
   resize: none;
  }
  

• or

  textarea { 
   max-height: 100px;
  }
  

change "100" to what ever you want.

or try this in your textarea :

<textarea style="resize:none"></textarea>