SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    223
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Where are you seeing the extra padding? Do you have a screenshot as I'm not sure where I am looking?

    Unless you mean the space that the resize icon takes up that allows users to resize the textarea. Yuo can disable it with:

    Code:
    textarea {resize:none}
    BTW never do this for real: (I realise you just added it for the demo but just in case anyone else thinks its a good idea)
    Code:
    * {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;}
    The only properties you want to supply universally are margins and padding only and even then its debatable as it affects some form controls detrimentally.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    223
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Where are you seeing the extra padding? Do you have a screenshot as I'm not sure where I am looking?
    Dear Paul,

    As I mentioned you'll see the scrollbar and its extra padding if you add more content to the textarea.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Ah ok it's a long standing bug in Firefox with no solution at present I'm afraid. I couldn't see any workarounds other than not applying right padding (but you still get the gap at the top and bottom). Maybe use a taller line height and just use left padding.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •