Box-sizing: how to get rid of the scrollbar padding in Firefox

**Rain Lover** · Dec 31, 2011 11:23

Hi,

Here's a sample code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>Sample Textarea</title>
<style type="text/css">
* {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;}
textarea {overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; padding:6px;}
</style> 
</head>  
<body> 
<form action="#">
<textarea rows="1" cols="1">This is some text.</textarea>
</form> 
</body>  
</html>

I used the box-sizing property to set the textarea width to 100% plus some padding and it works in all major browsers. However, in Firefox if you add more content to the textarea, you'll see unwanted padding around the scrollbar.

Many thanks for any help!
Mike

**Paul O'B** · Dec 31, 2011 12:02

Where are you seeing the extra padding? Do you have a screenshot as I'm not sure where I am looking?

Unless you mean the space that the resize icon takes up that allows users to resize the textarea. Yuo can disable it with:

Code:

textarea {resize:none}

BTW never do this for real: (I realise you just added it for the demo but just in case anyone else thinks its a good idea)

Code:

* {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;}

The only properties you want to supply universally are margins and padding only and even then its debatable as it affects some form controls detrimentally.

**Rain Lover** · Dec 31, 2011 12:49

Originally Posted by Paul O'B

Where are you seeing the extra padding? Do you have a screenshot as I'm not sure where I am looking?

Dear Paul,

As I mentioned you'll see the scrollbar and its extra padding if you add more content to the textarea.

**Paul O'B** · Dec 31, 2011 15:32

Ah ok it's a long standing bug in Firefox with no solution at present I'm afraid. I couldn't see any workarounds other than not applying right padding (but you still get the gap at the top and bottom). Maybe use a taller line height and just use left padding.

User Tag List

Thread: Box-sizing: how to get rid of the scrollbar padding in Firefox

Thread Tools

Display

Box-sizing: how to get rid of the scrollbar padding in Firefox

Bookmarks

Bookmarks

Posting Permissions