diff --git a/packages/devextreme/scss/widgets/base/_form.scss b/packages/devextreme/scss/widgets/base/_form.scss index 761674e84492..82450e4160f4 100644 --- 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 index fa6b0df1df2a..2881a12a401b 100644 --- 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 index f261662dfd91..f6b6121d95e6 100644 --- 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 index 6c17b0e4c9a9..4aa986b197dc 100644 --- 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 index 552f5e57e14b..189fd6ab26bd 100644 --- 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/packages/devextreme/testing/testcafe/tests/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png index f3cc47e84149..2da517951641 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png differ