CSS: How to Remove That Bottom Padding from Textarea on Firefox

I noticed it just now, when creating something. There was that extra bottom padding on textarea, even though I put box-sizing: border-box; for it.
I couldn't see what's that empty space using box-model inspector. Then, I remembered the scrollbar.

The extra bottom padding on textarea on Firefox is actually the (hidden) bottom horizontal scroller bar. It's displayed as empty space if we didn't declare the overflow property.

Here's a list about the textarea's overflow property

If you want both x and y scrollbars to always appear

textarea {
    overflow: scroll;
}

Making both x and y scrollbars to disappear

textarea {
    overflow: hidden;
}

Hide y scrollbar but not the x

textarea {
    overflow: auto;
    overflow-y: hidden;
}

SOLUTION: Make the x scrollbar to disappear but let the y one

This one solved the extra bottom padding on Firefox

textarea {
    overflow: auto;
    overflow-x: hidden;
}

I think that's kind of a display "bug" on Firefox. Or not, I'm not sure.
Because by default (on Chrome, for instance), textarea's overflow property is set to auto.
The auto means when there's no overflowing stuffs from the element (textarea), no scrollbar or extra empty space will be shown.

Sort of.
Anyway, as I strolled around on the web, the overflow: auto; property has "weird" behavior on textarea on any browser, not just Firefox.

In Conclusion

On Firefox (or any other browser), we need to explicitly define the overflow property for the textarea element to remove that bottom empty space.

And maybe add a bit of JavaScript to make it dynamic.

Monkey Raptor

Monkey Raptor

Wednesday, August 5, 2015

CSS: How to Remove That Bottom Padding from Textarea on Firefox

No comments

Post a Comment