Height of textarea does not match the rows in Firefox

Question

There are lot of answers but wasn't suitable for me:

• CSS rule (height: 5em;) is not flexible enoutgh because it completely overrides rows attribute
• And I don'n want to use JavaScript

There is a "bug": TEXTAREA incorrectly applying ROWS= and COLS=

So here is my solution:

FF adds height to the TextArea to reserve place for scroll-bars.

I don't need horizontal scroll bar so it helps with fixing the issue: following css rule can be added to textarea:

overflow-x: hidden;

Here is example. It works even with rows=1.

Firefox always adds an extra line after the textfield. If you want it to have a constant height, use CSS, e.g.:

textarea {
    height: 5em;
}

http://jsfiddle.net/Z7zXs/7/

EDIT: You can also use the @-moz-document url-prefix CSS extension to target only the Firefox browser. Example

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

You can fix the height by using JavaScript (or hard-code a height of 4x1.2 = 4.8em).

Example (JQuery), fix the issue for each textarea:

$("textarea").each(function(){
    var lineHeight = parseFloat($(this).css("line-height"));
    var lines = $(this).attr("rows")*1 || $(this).prop("rows")*1;
    $(this).css("height", lines*lineHeight);
});

The value of the line-height CSS property equals the height of each line ("row"). So, when you've defined row, this code will fix the height.

When the rows attribute is not set, the code will have a look at the default value (.prop("rows")).