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

**Rain Lover** · 12-31-2011, 05:14 PM

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

**jscheuer1** · 01-01-2012, 04:18 PM

Change:

Code:

padding:6px;

to:

Code:

padding:6px 0 6px 6px;

**Rain Lover** · 01-01-2012, 05:49 PM

Originally Posted by jscheuer1

Change:

Code:

padding:6px;

to:

Code:

padding:6px 0 6px 6px;

Dear John,

It not only removes the textarea right padding, which isn't desirable, but also leaves the unwanted scrollbar top and bottom padding intact.

**jscheuer1** · 01-02-2012, 05:20 PM

Oh well, I'm not sure we can get there from here then. I mean missing the right padding inside is no big deal, and neither is the persistence of it atop and below the scrollbar. Firefox is within its rights to see the padding as outside the scrollbar, after all padding only needs to be at the edge of the element. Who's to say if that edge is before or after the scrollbar?

If you want an exact rendering you may have to take a different approach, and then things get at least a bit more complicated.

A division, possibly two nested divisions might work with or if you're lucky, without javascript. You would have to make the the one with the text contentEditable, and I'm not sure how cross browser that is without javascript.

If it's part of a form that is to be submitted, javascript would be required to get the text which would now be the element's innerHTML, rather than its value.

Even with all that it might still be a bit tricky to get it to layout exactly as desired.

That said, this seems promising:

Code:

<!DOCTYPE html>
<html> 
<head> 
<title>Sample Editable Division</title>
<style type="text/css">
* {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;}
div {overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; padding:6px; font: normal 95% consolas, monospace;}
</style> 
</head>  
<body> 
<div contenteditable>This is some text.</div>
</body>  
</html>

But as I say it won't submit it's content as part of a form submission without a javascript assist.

**Rain Lover** · 01-02-2012, 09:24 PM

Originally Posted by jscheuer1

If you want an exact rendering you may have to take a different approach, and then things get at least a bit more complicated.

A division, possibly two nested divisions might work with or if you're lucky, without javascript. You would have to make the the one with the text contentEditable, and I'm not sure how cross browser that is without javascript.

Great idea! However, a textarea value and a division innerHTML can be different: in the textarea you can embed any content even a piece of HTML code:

Code:

<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.write(document.getElementById("myTextarea").value);
document.close();
}
</script>
</head>
<body>

<textarea id="myTextarea" rows="5" cols="30">
Insert HTML or JavaScript.
</textarea>
<br />

<button type="button" onclick="displayResult()">Write value of text area</button>

</body>
</html>

I can't get the same quality with innerHTML. Any thoughts?

**jscheuer1** · 01-02-2012, 10:21 PM

As I said, it gets at least a little complicated. If you're using it with PHP, you can use PHP to translate to and from entities for the < and > symbols in HTML tags. If not, or perhaps in conjunction with that custom javascript routines could be used.

However, the fact of the matter appears to be that of current version browsers*, only Firefox is falling down here. It doesn't look horrific in Firefox and I can't imagine it having any effect upon the functionality. So my inclination would be to just put up with it.

*In Chrome (and therefore probably also in Safari, maybe Konquerer - anything webkit) the html and body selectors need to be overflow: hidden for the textarea tag example in your original post to look right.

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions