Height of Textarea Does Not Match The Rows in Firefox

Height of textarea does not match the rows in Firefox

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

Textarea extra row in FireFox browser

Yes, it's an age-old bug in Firefox that still hasn't been fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=33654.

There is a workaround:

textarea {
  overflow-x: hidden
}

I don't know if this workaround could cause any issue - is it ever possible for a textarea to overflow horizontally?

Textarea extra row in FireFox browser

Yes, it's an age-old bug in Firefox that still hasn't been fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=33654.

There is a workaround:

textarea {
  overflow-x: hidden
}

I don't know if this workaround could cause any issue - is it ever possible for a textarea to overflow horizontally?

firefox change height of textarea on enter not working

Write this:

function showmsg(event) {

in place of:

function showmsg() {

AND

write this (in HTML markup):

onkeyup="showmsg(event)"

in place of:

onkeyup="showmsg()"

Textarea tag makes two rows instead of one in Firefox but works good in Chrome

Firefox always add extra line for the textarea.
you can use CSS to be more precise about the height length.
Or you can also try using this css exxtension for mozilla only handler

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

I recommend to use both. Rows and cols are required and useful if the client does not support CSS. But as a designer I overwrite them to get exactly the size I wish.

The recommended way to do it is via an external stylesheet e.g.

textarea {  width: 300px;  height: 150px;}

<textarea> </textarea>

Textarea overflow:auto difference in height

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.

texarea behavior is different in IE and Firefox

If I understand correctly, to prevent a textarea from being resizable in FF, add the following to your selector:

textarea.errortext {
    resize:none;
}

---

Related Topics