Height of textarea does not match the rows in Firefox

html firefox textarea
user669677 picture user669677 · Oct 8, 2011 · Viewed 31.2k times · Source

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

Serg picture Serg · Mar 27, 2014

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.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Using <meta> tags to turn off caching in all browsers?

I read that when you don't have access to the web server's headers you can turn off the cache using: <meta http-equiv="Cache-Control" content="no-store" /> But I also read that this doesn't work in some versions of IE. …

Read More
How can I tell if a DOM element is visible in the current viewport?

Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)? (The question refers to Firefox.)

Read More