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:

Leave a Comment