Full Width Textareas
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.
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![Scrolling “Agree to Terms” Component with MooTools ScrollSpy]()
Remember the good old days of Windows applications forcing you to scroll down to the bottom of the "terms and conditions" pane, theoretically in an effort ensure that you actually read them? You're saying "No David, don't do it." Too late -- I've done...
![MooTools Zoomer Plugin]()
I love to look around the MooTools Forge. As someone that creates lots of plugins, I get a lot of joy out of seeing what other developers are creating and possibly even how I could improve them. One great plugin I've found is...
Very nice. I’ve struggled with this in the past. Top tip
Great tip. Thanks.
Great tip.
Is it support in all browser?
last I checked, ie9 did not support this, but i think ie10 had plans to
Actually it is quite well supported :
Firefox, Opera, Safari, Chrome, IE8+
See : http://caniuse.com/#feat=css3-boxsizing
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.
Does not work for me (Win7, Firefox 15.0.1)
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:
Does not work for me too (Mac OS X, Chrome 26)
Works for me on this stack!
Hmm… nice, I got saved! thanks for sharing :D
Nice, it works…
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?
Doesn’t work for me (Windows 7 + Chrome 46.0.2490.80 m)