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.
![Page Visibility API]()
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![Create a Clearable TextBox with the Dojo Toolkit]()
Usability is a key feature when creating user interfaces; it's all in the details. I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements. No holding the delete key down. No pressing it a...
![New MooTools Plugin: ElementFilter]()
My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work.
The XHTML
I've used a list for this example...
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)