How to make a text area 10 lines tall?

Question

How to make a text area 10 lines high? I put like

<label for="textarea" style="font-weight: bold;">Message Content:</label> <br/> <textarea cols="40" rows="10" class="ui-input-text" name="textarea" id="textarea" placeholder="Enter Message"></textarea> 

but when loading the page it is not a height of 10 lines.

Answer 1

It is available only in browsers that allow you to resize. You can prevent this with this CSS:

 textarea { resize: none; } 

While for a height other than 10 lines, I suspect that this is because the height of 10 lines is calculated for the original style and if you change the style to a different font and / or font size and add an addition, it may not match. Try setting the height, e.g. 10em or 10em + padding.

Answer 2

with resizing: no;

If the height is wrong, try setting it with css, maybe

 <textarea style="resize: none;" cols="40" rows="10" ... 

Answer 3

you can try:

 resize:none; height: 320px; max-height: 320px; 

works for me