Gravity Forms / jQuery UI Datepicker Too Narrow (Box-sizing)

Datepicker – dynamically sized container is too narrow

This was my view of a Gravity Forms datepicker, but the problem of the pop-up container being too narrow may affect other instances of the jQuery UI Datepicker too.

Gravity Forms 1.6.5 still uses it’s own jQuery UI 1.6 files, instead of the UI 1.8+ files now included with WordPress core. The width of the container is added as an inline style by the core jQuery UI Datepicker 1.6 code:

// fix width for dynamic number of date pickers
inst.dpDiv.width($.datepicker._getNumberOfMonths(inst)[1] *
	$('.ui-datepicker', inst.dpDiv[0])[0].offsetWidth);

Even without knowing what any of the variables are, it’s clear that the width is taken as the product of the number of months shown (usually one, but can be two) and the width of the .ui-datepicker, which is the table of dates inside the container.

Since Gravity Forms was providing the styles for all aspects of the pop-up, including the top dropdowns and table cell appearance, it was sensible to assume that its CSS was fine on it’s own.

Box-sizing

I’d recently added the code from Paul Irish’s box-sizing article, so that all elements would use the border-box layout system.

The solution then, was to revert just the problem element back to using content-box:

.ui-datepicker-div,
.ui-datepicker-inline,
#ui-datepicker-div {
	box-sizing: content-box;
}

With this put into a theme’s style.css file, the container has the same width value applied around its content, padding and border, instead of just its content.

Datepicker – formatting fixed.

Simple enough, but hopefully this post can save someone a little time.