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.
![9 Mind-Blowing WebGL Demos]()
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
![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...
![Adding Events to Adding Events in MooTools]()
Note: This post has been updated.
One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...
![Firefox Marketplace Animated Buttons]()
The Firefox Marketplace is an incredibly attractive, easy to use hub that promises to make finding and promoting awesome HTML5-powered web applications easy and convenient. While I don't work directly on the Marketplace, I am privy to the codebase (and so...
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)