Height of textarea does not match the rows in Fire

Question

The textarea's rows attribute does not match the number of lines in Firefox. For instance:

<textarea rows=4 cols=40>
1
2
3
4
this line is visible in FF
</textarea>

Example: http://jsfiddle.net/Z7zXs/6/

How can I fix this issue? The textarea should only display 4 lines (instead of 5) for rows=4.

Answer 1

I've had the same problem once and i couldn't use CSS, so JavaScript is the only way: Here's the Mootools and jQuery ways to do this:

Mootools:

window.addEvent('domready', function() {
if (Browser.firefox) {
    $$('textarea[rows]').each(function(el) {
        if (!el.retrieve('ffRowsFixed')) {
            var rows = el.get('rows').toInt();
            if (rows > 1) el.set('rows', (rows - 1));
            el.store('ffRowsFixed', true);
        }
    });
}
});

jQuery:

$(document).ready(function() {
if ($.browser.mozilla) {
     $('textarea[rows]').each(function(i, el) {
         if (!$(el).data('ffRowsFixed')) {
             var rows = parseInt($(el).attr('rows'));
             if (rows > 1) {
                 $(el).attr('rows', (rows - 1));
             }
             $(el).data('ffRowsFixed', true);
         }
     });
}
});

It will check if the browser is firefox, if it is, it will check if the rows have been corrected already, and if not they will get fixed.

Answer 2

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;
    }
}

Answer 3

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")).

Answer 4

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.