#8124 Broken alignment on the Preview.

Fixes #8124
surveyjs · Apr 18, 2024 · 26d13b4 · 26d13b4
1 parent ffa24dc
commit 26d13b4
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 1 deletion.
diff --git a/src/defaultV2-theme/blocks/sd-row.scss b/src/defaultV2-theme/blocks/sd-row.scss
@@ -56,7 +56,12 @@
     align-items: stretch;
   }
 }
-
+.sd-panel.sd-panel--as-page {
+  &>.sd-panel__content>.sd-row--multiple {
+    margin-left: calcSize(-2);
+    width: calc(100% + var(--base-unit) * 2);
+  }
+}
 .sd-panel:not(.sd-panel--as-page) {
   .sd-row--multiple {
     row-gap: var(--sd-base-vertical-padding);

diff --git a/visualRegressionTests/tests/defaultV2/etalons/panel-preview-mode-multi.png b/visualRegressionTests/tests/defaultV2/etalons/panel-preview-mode-multi.png
diff --git a/visualRegressionTests/tests/defaultV2/panel.ts b/visualRegressionTests/tests/defaultV2/panel.ts
@@ -270,6 +270,70 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check preview mode for multi-rows", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        "pages": [
+          {
+            "name": "page2",
+            "elements": [
+              {
+                "type": "text",
+                "name": "question5",
+                "title": "First name"
+              },
+              {
+                "type": "text",
+                "name": "question6",
+                "startWithNewLine": false,
+                "title": "Last name"
+              },
+              {
+                "type": "text",
+                "name": "question7",
+                "title": "Address"
+              },
+              {
+                type: "panel",
+                "name": "dd",
+                "elements": [
+                  {
+                    "type": "text",
+                    "name": "question1",
+                    "title": "First name"
+                  },
+                  {
+                    "type": "text",
+                    "name": "question2",
+                    "startWithNewLine": false,
+                    "title": "Last name"
+                  },
+                  {
+                    "type": "text",
+                    "name": "question3",
+                    "title": "Address"
+                  },
+                ]
+              },
+            ]
+          },
+        ],
+        "showQuestionNumbers": "off",
+        "questionsOnPageMode": "singlePage",
+        "showPreviewBeforeComplete": "showAllQuestions",
+        "widthMode": "static",
+        "width": "800"
+      });
+      await ClientFunction(() => {
+        document.body.focus();
+        (<any>window).survey.showPreview();
+      })();
+      const panelRoot = Selector(".sd-panel--as-page");
+      await takeElementScreenshot("panel-preview-mode-multi.png", panelRoot, t, comparer);
+    });
+  });
+
   test("Two panels - one row, small screen", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(722, 1000);