Menu
Community /Pin to ProfileBookmark
@Rain_LoverJan 01.2012 — #
I'd prefer a straightforward CSS solution, but I'm open to any workaround!@Rain_LoverJan 02.2012 — #
I'm afraid there seems to be no solution. ?
Box-sizing: how to get rid of the scrollbar padding in Firefox
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
Sign in
to post a comment4 Comments(s) ↴
0
@Rain_LoverJan 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!
0
@Rain_LoverJan 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. ?