Prevent wrapping of individual date inputs

alphagov · Mar 27, 2019 · d228116 · d228116
1 parent 5dc0c1c
commit d228116
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,12 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Prevent wrapping of individual date inputs
+
+  Date inputs should group together as if they're a single field, this fix keeps them together using `white-space: nowrap`.
+
+  ([PR #1257](https://github.com/alphagov/govuk-frontend/pull/1257))
+
 ## 2.9.0 (Feature release)
 
 🆕 New features:

diff --git a/src/components/date-input/_date-input.scss b/src/components/date-input/_date-input.scss
@@ -12,14 +12,18 @@
     @include govuk-clearfix;
     // font-size: 0 removes whitespace caused by inline-block
     font-size: 0;
+    white-space: nowrap;
   }
 
   .govuk-date-input__item {
     display: inline-block;
-    margin-right: govuk-spacing(4);
     margin-bottom: 0;
   }
 
+  .govuk-date-input__item + .govuk-date-input__item {
+    margin-left: govuk-spacing(4);
+  }
+
   .govuk-date-input__label {
     display: block;
   }