Gravity Forms / jQuery UI Datepicker Too Narrow; or, { box-sizing: border-box }

Gary Jones whipped up an especially helpful little tip for Gravity Forms based on Paul Irish’s border-box advice. Seriously helpful stuff. As Paul said:

One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand.

I’m right there with him. A bit of CSS applied to all elements fixes the problem:

stuff we dig

FYI: yes, the above are affiliate links, so we do make a small amount of money if you follow them over and buy what they're selling. Thank you for helping pay our hosting costs!

Dave Kuhar

Dave is the jack-of-all-trades running Transmit Studio, a media creation lab in San Jose. He's built more websites than he can remember, well over a hundred of them on WordPress. Whether it's tradeshow booths, video/TV, graphic design, presentations, magazine, tearsheet, and catalog layout, corporate identity packages, or just about any other kind of visual communication project, he's worked on it!

Leave a Comment