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

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.
fomantic · Feb 17, 2020 · c2ce312 · c2ce312
1 parent c512cf2
commit c2ce312
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
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;