Advanced Search

Results 1 to 7 of 7

Thread: Firefox doesn't respect box model on textarea with max-width or max-height

  1. #1
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default Firefox doesn't respect box model on textarea with max-width or max-height

    I have a textarea with a border and padding and I specified a max-width in order to prevent Safari, Opera and Chrome users to resize the width. Strangely, Firefox (3.0.6 on XP) doesn't respect the box model for the textarea if it has a max-width or a max-height. To show this, I have simplified the code so you can try it for yourselves:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	margin: 30px;
    }
    .border {
    	border: 4px solid black;
    	width: 400px;
    }
    .noborder {
    	border: none;
    	width: 400px;
    }
    div.nomax {
    	background: #999;
    }
    div.max {
    	background: #aaa;
    	max-width: 400px;
    }
    textarea {
    	overflow: hidden;
    	padding: 0;
    }
    textarea.nomax {
    	background: #ccc;
    }
    textarea.max {
    	background: #eee;
    	max-width: 400px;
    }
    </style>
    </head>
    <body>
    <div class="border nomax">div - width 400px</div>
    <div class="border max">div - width 400px, max-width 400px</div>
    <textarea class="border nomax">textarea - width 400px</textarea>
    <br>
    <textarea class="border max">textarea - width 400px, maxwidth 400px</textarea>
    <div class="noborder nomax">div - width 400px</div>
    <div class="noborder max">div - width 400px, max-width 400px</div>
    <textarea class="noborder nomax">textarea - width 400px</textarea>
    <br>
    <textarea class="noborder max">textarea - width 400px, maxwidth 400px</textarea>
    </body>
    </html>
    As you can see, the first containers and textareas have a 4 pixel border and a width of 400 pixels. The second textarea has a max-width of 400 pixels. They should all have the same width, 400 pixels, and they do in IE, Opera, Chrome but not in Firefox! Instead, Firefox calculates the borders as part of the width. It also calculated the padding but I didn't use that as part of the example, you can try that if you want. I put the same content without borders so you can see the difference better.

    Does anyone know why this happens and if there is any workaround it? What I need is a textarea with a width that cannot be resized (height is fine). The reason why I need to specify the width is because I need the textarea to align with other elements and it would not work if some users could change the width. Since I am using both borders and padding for the textarea, this bug causes it to not align in Firefox, but works fine in all other browsers.

    I appreciate your help!
    Last edited by Snookerman; 04-22-2009 at 09:40 AM. Reason: added “Resolved” prefix
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default Update

    I have submitted this bug to Bugzilla and hopefully it will be fixed in the future:
    https://bugzilla.mozilla.org/show_bug.cgi?id=481024

    In the mean time, does anyone know of another way to prevent the resizing of textareas in browsers that allow it?

    Thanks!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    textarea { resize: none; }



    EDIT: You could also use:

    textarea { resize: vertical; }

    It's funny, I came here to ask a resize question and this was the top post. :P
    Last edited by jlizarraga; 03-14-2009 at 05:03 AM. Reason: more info

  4. The Following User Says Thank You to jlizarraga For This Useful Post:

    Snookerman (03-14-2009)

  5. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Hmm.. for some reason I was of the impression that resize was not supported by all browsers but when I think about it, I never really gave it a try (CSS3 racist!!). I'll take a look and see if it works, thanks!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  6. #5
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default

    It's not supported by all browsers, but it's harmless in browsers that don't.

  7. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    I just came across an old post of mine: http://www.dynamicdrive.com/forums/showthread.php?p=175478#post175478
    Seems I knew how to solve that, I just forgot

    Regarding the Firefox bug, a fix has been proposed and it will probably make the release after 3.5 https://bugzilla.mozilla.org/show_bug.cgi?id=481024
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  8. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    This bug has now been fixed in Firefox 3.6 that is in beta right now.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Tags for this Thread

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
  •