fix(form): inline calendar fields did not display properly

lubber-de · web-flow · commit c2ce312fb2cd · 2020-02-17T10:20:32.000+01:00
When a ui calendar is used within a inline field, its display was broken (shrunk and not inline)
I had to use a proper direct em setting to fix this, as the input field is inside the calendar component making the usual width: auto not work as for the other standard input form fields.
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -1097,6 +1097,16 @@
     font-size: @inlineInputSize;
   }
 
+  .ui.form .inline.fields .field .calendar:not(.popup),
+  .ui.form .inline.field .calendar:not(.popup) {
+    display:inline-block;
+  }
+
+  .ui.form .inline.fields .field .calendar:not(.popup) > .input > input,
+  .ui.form .inline.field .calendar:not(.popup) > .input > input {
+    width: @inlineCalendarWidth;
+  }
+
   /* Label */
   .ui.form .inline.fields .field > :first-child,
   .ui.form .inline.field > :first-child {
diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables
@@ -158,6 +158,7 @@
 @inlineLabelFontSize: @labelFontSize;
 @inlineLabelFontWeight: @labelFontWeight;
 @inlineLabelTextTransform: @labelTextTransform;
+@inlineCalendarWidth: 13.11em;
 
 @groupedInlineLabelMargin: 0.035714em 1em 0 0;
 
