Fix gap between editors in property grid (#6310)

surveyjs · Dec 24, 2024 · aa6b26a · aa6b26a
1 parent 86078d6
commit aa6b26a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-panel.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-panel.scss
@@ -60,7 +60,7 @@
   }
 
   .spg-row--multiple {
-    margin-top: calcSize(1);
+    margin-top: var(--ctr-editor-layout-gap, calcSize(1));
   }
 }
 .spg-panel__content > .spg-row:first-of-type {

diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
@@ -77,7 +77,8 @@
 
 .spg-row--multiple {
   & > div > .spg-row-narrow__question {
-    margin-top: calcSize(-1);
+    --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, #{calcSize(1)});
+    margin-top: calc(-1 * var(--thm-ctr-editor-layout-gap));
   }
 }
 

diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-theme-builder.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-theme-builder.scss
@@ -116,23 +116,23 @@
   }
 
   .sd-question--title-top .spg-paneldynamic {
-    margin-top: calcSize(-1);
+    --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, #{calcSize(1)});
+    margin-top: calc(-1 * var(--thm-ctr-editor-layout-gap));
   }
 
-  .spg-question.spg-row__question:not(.sd-question--title-top):not(.spg-question--boolean) {
-    margin-top: calcSize(-1);
+  .spg-question.spg-row__question:not(.sd-question--title-top):not(.spg-question--boolean),
+  .spg-question__content-coloralpha {
+    --thm-ctr-property-grid-form-gap: var(--ctr-property-grid-form-gap, #{calcSize(2)});
+    --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, #{calcSize(1)});
+    margin-top: calc(var(--thm-ctr-editor-layout-gap) - var(--thm-ctr-property-grid-form-gap));
   }
 
   .spg-row--multiple .spg-question.spg-row__question:not(.sd-question--title-top) {
     margin-top: 0;
   }
 
-  .spg-question__content-coloralpha {
-    margin-top: calcSize(-1);
-  }
-
   .spg-question-composite__content .spg-row:first-of-type {
-    margin-top: calcSize(1);
+    margin-top: var(--ctr-editor-layout-gap, #{calcSize(1)});
   }
 }