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

Screenshot of a datepicker that has the content cut-off on the right side

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:

583 584 585
// 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:

1 2 3 4 5
.ui-datepicker-div,
.ui-datepicker-inline,
#ui-datepicker-div {
box-sizing: content-box;
}
view raw style.css hosted with ❤ by GitHub

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.

Screenshot showing a nicely formatted datepicker

Datepicker – formatting fixed.

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

Why @return void is wrong in PHP documentation Putting an end to a bad practice

When documenting PHP, there are two schools of thought regarding the use of @return tags in DocBlocks when the function or method being documented doesn’t actually have a return keyword:

  1. Don’t include a @return tag.
  2. Include a @return tag with a type of void.

I’m not saying that either is wrong, but the second-one is most definitely as far from correct as you can get.

Let’s look at the reasons.
Read the reasons

Line-up Vendor Prefixed Property Values Make your CSS easier to scan and edit

Making code easier to read is a useful thing. I often make a point of lining up assignment operators or array values in PHP as I find it far easier to scan. I’ve now got a tip for doing something similar in CSS.

View the example and solution

Enqueued Style Sheet Extras Fine-tuning your additional style sheets

The WP_Styles class in WordPress allows for a few extra bits of fine-tuning via the extra property, which is amended by calling add_data( $handle, $key, $value ) method on the global $wp_styles.

View what extras are available

Get a Google Developer API Key How to access the Web Fonts API

To get developer API (application programming interface) access to several of the Google services, you need to have an API key. This is so Google can tell who is accessing the service, and ensure that each person stays below the courtesy daily limit for the number of requests.

Here we look at how to allow access for, and get a key for, the Google Web Fonts API.

View the tutorial