Textarea overflow:auto difference in height

Question

Following code renders a textarea which should have 3 visible rows:

<textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea>

However, in Firefox (version 20.0.1), 4 rows are shown instead of 3.

How can I fix this?

was this perhaps a bug in firefox 20? Cannot reproduce in firefox 23. — bwoebi, May 21 '13 at 10:05
possible duplicate of [Height of textarea does not match the rows in Firefox](http://stackoverflow.com/questions/7695945/height-of-textarea-does-not-match-the-rows-in-firefox) — Mr_Green, May 22 '13 at 05:29

score 1 · Accepted Answer · answered May 21 '13 at 10:07

1

Firefox adds an extra lines after the textfields. You can fix this with CSS :

@-moz-document url-prefix() {
    textarea {
        height: 4em;
    }
}

The @-moz...is for mozilla specific rule, the url-prefix rule applies the rule to any page whose URL starts with it.

answered May 21 '13 at 10:07

Xavier

Thanks for the solution. How can we specify a particular styling for other browsers in the same way? – Touhid Rahman May 21 '13 at 13:53

score 1 · Answer 2 · edited Sep 16 '17 at 12:21

1

Here is the Solution

textarea {
    height: 4em;
}

<textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea>

Hope this helps.

edited Sep 16 '17 at 12:21

answered May 21 '13 at 10:07

Nitesh

2 Answers2