How to make text area to be height of 10 rows fixed?

Question

How to make text area to be height of 10 rows fixed ? 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 it is not 10 rows height when page loads and it is resizable.

Answer 1

It is only resizable in browsers that allow it to be resized. You can prevent it with this CSS:

textarea
{
    resize: none;
}

Whereas regarding the height not being 10 rows, I suspect that it is because the 10 row height is calculated for the original style and if you've changed the style to a different font and/or font-size, and added padding, it may not match. Try setting the height to, say, 10em or 10em + padding.

Answer 2

With resize: none;

If the height is not right, maybe try to set it with CSS

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