/ CSS3

Text Area Width 100% causing you issues?

Today I came across a CSS fix (not hack) that solves an issue I've had to face numerous times in the past. The issue is caused when you have a text area with a width of 100%. That same text area has a margin and a padding, and those get added to the width of the text area. So you end up w/ a text area that extends outside of its parent container. Using the classes below, you can alter the default CSS box model used to calculate widths and heights of elements.It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

.boxsizingBorder {
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}

Sources:
https://developer.mozilla.org/En/CSS/Box-sizing
http://css-tricks.com/box-sizing/


Corey Snyder

Corey Snyder

Senior Front-End Engineer for Aver Inc.. I have independently developed & released multiple video-games. I play Ice Hockey, I race FPV Drones, and I love my Subaru WRX STI.

Read More