Full Width Textareas

By  on  

Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily there's a quick CSS solution to this problem!

The CSS

box-sizing to the rescue!

textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	width: 100%;
}

Setting the box-sizing to border-box allows the textarea to respect its parent container's padding and border, recalculating what 100% actually means.  If the box-sizing were content-box, the textarea would continue to stretch outside the parent container as it would have before.

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    Digg-Style Dynamic Share Widget Using the Dojo Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

  • By
    Sexy Opacity Animation with MooTools or jQuery

    A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique...

Discussion

  1. Very nice. I’ve struggled with this in the past. Top tip

  2. Great tip. Thanks.

  3. Great tip.
    Is it support in all browser?

  4. brett

    last I checked, ie9 did not support this, but i think ie10 had plans to

  5. Actually it is quite well supported :
    Firefox, Opera, Safari, Chrome, IE8+

    See : http://caniuse.com/#feat=css3-boxsizing

  6. See this Paul Irish link…

    http://paulirish.com/2012/box-sizing-border-box-ftw/

    Helps tremendously with mobile development as well and calculation of % width when utilizing this box-sizing.

  7. Tom

    Does not work for me (Win7, Firefox 15.0.1)

  8. I use Win7 64bits and tested with Firefox 15.0.1, IE9, Safari and Chrome. All working fine
    Be sure to use all 3 declarations for maximum compatibility:

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
  9. Does not work for me too (Mac OS X, Chrome 26)

  10. Hmm… nice, I got saved! thanks for sharing :D

  11. Nice, it works…

  12. Hi David! First i should say thanks about what you have written, I have question, i have done whatever you said but i wanna get some space from around of its parent tag, and i gave it margin:10px . But it doesn’t work ! Why?

  13. Alf

    Doesn’t work for me (Windows 7 + Chrome 46.0.2490.80 m)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!