homepage Welcome to WebmasterWorld Guest from 54.204.58.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




msg:4402659
 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




msg:4402774
 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




msg:4402781
 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




msg:4402824
 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




msg:4402853
 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




msg:4403024
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved