browser support attribute rows from textarea

Question

I noticed that browser behave differently for the following

<textarea rows="4"></textarea>

(jsfiddle

In chrome you can resize the textarea, but not smaller than 3 rows. However, in firefox the rows attribute seem to be ignored. And to top it all, in IE11 you cannot resize it at all !

Is there a fix for this ?

Answer 1

Regarding IE, the resize issue occurs because, the re-sizing is done by CSS resize property, which is not supported by IE. This issue can be solved by using Resizable plugin:

Example

HTML:

<textarea type="textarea" id="txtArea" placeholder="enter the message..."></textarea>

jQuery:

$("#txtArea").resizable();

CSS:

 #txtArea { overflow: hidden; /* for the scrollbars */}

And when it comes to Firefox, it always adds an extra line after the textfield. If you want it to have a constant height, you need to use CSS.

So overall there is no out-of-the-box solution, when it comes to the height or any other styles of the textarea in different browsers. So only possible solution left would be to use CSS or Javascript.

If you want to target Firefox:

@-moz-document url-prefix() {
    textarea {
        height: 4em /* or use px to be sure */ ; 
    }
}