/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Dec 31.2011

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>[/CODE]

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

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@hamburglarJan 01.2012 — Hey,

Now the scrollbar is little irritating to figure out.

One option, a bandage solution, is to set the padding for mozilla browsers only.

[code=html]@-moz-document url-prefix() {
textarea {
padding: 0 0 6px 6px;
}
}
[/code]

The downside to this is that there is no 6px padding for top or right.

Would you want to use any JS to fix this problem or strictly CSS?
Copy linkTweet thisAlerts:
@Rain_LoverauthorJan 01.2012 — Would you want to use any JS to fix this problem or strictly CSS?[/QUOTE]

I'd prefer a straightforward CSS solution, but I'm open to any workaround!
Copy linkTweet thisAlerts:
@hamburglarJan 02.2012 — You find any solution to this?

I am very curious for a proper work around. The only thing i have come across is by changing the width dimensions etc..
Copy linkTweet thisAlerts:
@Rain_LoverauthorJan 02.2012 — You find any solution to this?

I am very curious for a proper work around. The only thing i have come across is by changing the width dimensions etc..[/QUOTE]


I'm afraid there seems to be no solution. ?
×

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
about: ({
version: 0.1.9 — BETA 10.12,
social: @webDeveloperHQ,
});

legal: ({
terms: of use,
privacy: policy
analytics: Fullres
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @aldoushuxley,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @linalla,
tipped: article
amount: 1000 SATS,
)...