Results 1 to 6 of 6

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

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default 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
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Change:

    Code:
    padding:6px;
    to:

    Code:
    padding:6px 0 6px 6px;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 01-02-2012 at 05:33 PM. Reason: add font
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    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?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •