Date input component spacing problem at very narrow widths

[andysellick]

If the date input is in a small enough space that it is forced to wrap, there's not enough vertical spacing between the label and the inputs above (see screenshot). Seems to occur if the component is in a container less than 200px wide.

This might seem unlikely to occur in the wild but we eventually want to use the date input component in finders to replace the existing single input field (for example on the news and communication finder). Here the component would be in a narrow side column that can be reduced to a width less than 200px before hitting the mobile break point.

(there is some right margin on the 'year' input that could be removed, possibly, although that wouldn't completely solve the issue)

[NickColley]

We could consider using flexbox here...

[dashouse]

Hey @andysellick,

This is a use case of this component that wasn't entirely expected, we tend to support something like this down to about 320px (inclusive of page gutter).

When something like this is used on a larger screen but in a small container the smaller font size won't have kicked in so the component will also be bigger than if it was 100% of a smaller screen.

There's a couple of options if you want to get this working for you now,

a) Depending on what you're doing with the other components in the refine panel you could reduce the font size to 16px which will also reduce the size of the inputs. I wouldn't imagine you'd want to do this unless all of the other form elements were also 16px

b) Create your own modifier for the input widths. Currently the widths are defines by the classes govuk-input--width-2 and govuk-input--width-4. These set a width using the ex unit.

They are a little bigger than they'd actually need to be so you could delete these classes, and make your own modifier of the govuk-date-input__input class for each input.

A small tweak would be to change the year from govuk-input--width-4 to govuk-input--width-3 and see if that helps. You'll still be able to fit 4 characters in it, the extra space is there for a autocomplete icon that wouldn't be present in your use case.

[andysellick]

Thanks @dashouse. @alex-ju has implemented a fix to remove the margin right from the year input and swap around the margin so each of the input/label groups has a bit of top margin, without changing the layout of anything else. Seems to work.

[colinrotherham]

Since date input items use display: inline-block no flexbox needed.

Adding white-space: nowrap; will prevent wrapping.

[timpaul]

Closing this for now, as the original issue has been addressed. We'll review Colin's proposed solution separately. Thanks everyone