Fluent Form: prevent editors "jumping" in one column mode (#26095)

Co-authored-by: Alexander Bulychev <[email protected]>
DevExpress · Nov 27, 2023 · 62764ed · 62764ed
1 parent aaa0aa8
commit 62764ed
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
diff --git a/packages/devextreme/scss/widgets/base/_form.scss b/packages/devextreme/scss/widgets/base/_form.scss
@@ -19,10 +19,6 @@
     .dx-form-group .dx-single-column-item-content > .dx-first-row.dx-col-0.dx-field-item {
       padding-top: 0;
     }
-
-    .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item {
-      padding-top: 10px;
-    }
   }
 
   .dx-label-h-align {

diff --git a/packages/devextreme/scss/widgets/generic/form/_index.scss b/packages/devextreme/scss/widgets/generic/form/_index.scss
@@ -19,6 +19,12 @@
   .dx-field-item:not(.dx-last-col) {
     padding-inline-end: 15px;
   }
+
+  &.dx-layout-manager-one-col {
+    .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item {
+      padding-top: $generic-form-default-padding;
+    }
+  }
 }
 
 .dx-form-group-caption {

diff --git a/packages/devextreme/scss/widgets/generic/form/_sizes.scss b/packages/devextreme/scss/widgets/generic/form/_sizes.scss
@@ -6,6 +6,7 @@ $generic-form-group-caption-font-size: null !default;
 $generic-form-group-content-padding-bottom: null !default;
 $generic-form-label-icon-size: null !default;
 $generic-form-top-label-bottom-margin: null !default;
+$generic-form-default-padding: 10px !default;
 
 @if $size == "default" {
   $generic-form-group-caption-font-size: 20px !default;

diff --git a/packages/devextreme/scss/widgets/material/form/_index.scss b/packages/devextreme/scss/widgets/material/form/_index.scss
@@ -29,7 +29,7 @@
   > .dx-scrollable-wrapper {
     > .dx-scrollable-container {
       margin-left: -10px;
-      padding-left: 10px;
+      padding-left: $material-form-default-padding;
     }
   }
 }
@@ -48,10 +48,9 @@
       padding-inline-start: 20px;
     }
 
-    padding-bottom: 10px;
+    padding-bottom: $material-form-default-padding;
     font-size: $material-form-label-font-size;
 
-
     .dx-field-item {
       &.dx-last-row {
         padding-bottom: 0;
@@ -63,7 +62,15 @@
 .dx-form > .dx-layout-manager.dx-layout-manager-one-col {
   .dx-field-item {
     .dx-field-item.dx-last-row:not(.dx-last-col) {
-      padding-bottom: 10px;
+      padding-bottom: $material-form-default-padding;
+    }
+
+    .dx-form-group .dx-single-column-item-content > .dx-first-row.dx-col-0.dx-field-item {
+      padding-top: 0;
+    }
+
+    .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item {
+      padding-top: $material-form-default-padding;
     }
   }
 }

diff --git a/packages/devextreme/scss/widgets/material/form/_sizes.scss b/packages/devextreme/scss/widgets/material/form/_sizes.scss
@@ -11,6 +11,7 @@ $material-form-default-top-padding: null !default;
 
 $material-form-label-font-size: null !default;
 $material-form-label-icon-size: 14px !default;
+$material-form-default-padding: 10px !default;
 
 @if $size == "default" {
   $material-form-label-font-size: 14px !default;

diff --git a/...ts/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png b/...ts/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png