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

Forum Moderators: not2easy

Message Too Old, No Replies

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

Rain_Lover

5:31 pm on Dec 31, 2011 (gmt 0)

Hi,

Here's a sample 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

11:11 am on Jan 1, 2012 (gmt 0)

It's a Mozilla bug (Bugzilla@Mozilla – Bug 157846) - I don't think there's anything you can do about it.

alt131

1:05 pm on Jan 1, 2012 (gmt 0)

Hi Paul. beat me to it ;) What is interesting is that it was first noted when the recommendations didn't specify where the scrollbar should be placed, but it has not been re-visited now they do. I'm guessing the bug is the reason box-sizing isn't an effective cure as well.

Another bug is that firefox doesn't recognise % padding on textarea, which can be used to overcome this, but unfortunately ff interprets a % length for one side as padding: 0 for all sides which defeats the purpose here.

An additional issue is that ff displays the resize handle the same colour as the textarea background which creates an even larger bottom "padding". (Unlike winsafari, for eg, which clearly makes the resize an extension of the scoll bar.)

So rainlover that makes workarounds awkward, so probably important to identify your priorities. For example, if consistent display is critical, then remove the padding and set an 8px border to re-produce the scroll bar position cross-browser. If the key is to avoid the unsightly top/right/bottom padding then just use padding-left, or perhaps a % padding for the other browsers and a border-left to create the visual space. Line-height can be used to create a visual gap between the top edge and the text. If the text was only going to be a single line text-indent could be used. (Unfortunately ff doesn't recognise first-line on textarea which would provide a more targeted work-around. )

Rain_Lover

6:32 pm on Jan 1, 2012 (gmt 0)

remove the padding and set an 8px border to re-produce the scroll bar position cross-browser.

Dear alt131,

Thanks for the suggestion. I tried it and got the same result.

Paul_o_b

9:35 pm on Jan 1, 2012 (gmt 0)

You could hide the right padding in mozilla but it's a bit convoluted for such a small effect.


<!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">
* {
margin:0;
border:0;
padding:0;
}
html, body, div, form, textarea {
width:100%;
height:100%;
background:#D3D3D3;
}
textarea {
overflow:auto;
padding:10px;
resize:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
@-moz-document url-prefix() {
div {
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 padding:0 10px 0 0;
 overflow:hidden;
}
textarea {
 -moz-box-sizing:content-box;
 box-sizing:content-box;
 margin:0 0 0 10px;
 padding:0 10px 0 0;
}
}
</style>
</head>
<body>
<form action="#">
<div>
<textarea rows="1" cols="1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </textarea>
</div>
</form>
</body>
</html>

Rain_Lover

8:34 pm on Jan 2, 2012 (gmt 0)

Dear Paul,

As always many thanks for your help! However, as you mentioned it's too convoluted and I'd prefer to forget about the padding until Firefox resolves the bug.

I thought the issue was related to the box-sizing property, but even if you leave it out from the code and give fixed width and height values to the textarea and other elements, the problem still remains the same.