Work for #7233: fix matrix with many columns inside panel (#7245)

surveyjs · Oct 27, 2023 · 1b5416c · 1b5416c
1 parent b7bbc89
commit 1b5416c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-matrix.scss b/src/defaultV2-theme/blocks/sd-matrix.scss
@@ -8,15 +8,19 @@
 
 .sd-matrix__label {
   display: flex;
+  position: relative;
   justify-content: center;
 }
+
 .sd-matrix__text {
   padding: calcSize(2);
 }
+
 .sd-matrix__text--checked {
   background-color: $primary-light;
   padding: calcSize(2);
 }
+
 .sd-matrix__cell:first-of-type {
   font-weight: $font-questiontitle-weight;
   text-align: left;

diff --git a/...tests/defaultV2/etalons/question-matrix-single-select-in-panel-many-columns.png b/...tests/defaultV2/etalons/question-matrix-single-select-in-panel-many-columns.png
diff --git a/visualRegressionTests/tests/defaultV2/matrix.ts b/visualRegressionTests/tests/defaultV2/matrix.ts
@@ -205,6 +205,52 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("question-matrix-single-select-in-panel-no-title.png", questionRoot, t, comparer);
     });
   });
+  test("Matrix single-select in panel with many columns", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1200, 1200);
+      await initSurvey(framework,
+        {
+          pages: [
+            {
+              name: "page1",
+              elements: [
+                {
+                  type: "panel",
+                  name: "panel1",
+                  title: "Panel",
+                  elements: [
+                    {
+                      type: "matrix",
+                      name: "question2",
+                      columns: [
+                        "Column 1",
+                        "Column 2",
+                        "Column 3",
+                        "Column 4",
+                        "Column 5",
+                        "Column 6",
+                        "Column 7",
+                        "Column 8",
+                        "Column 9",
+                        "Column 10",
+                        "Column 11",
+                        "Column 12",
+                        "Column 13",
+                        "Column 14"
+                      ],
+                      rows: ["Row 1", "Row 2"]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        });
+
+      const questionRoot = Selector(".sd-row");
+      await takeElementScreenshot("question-matrix-single-select-in-panel-many-columns.png", questionRoot, t, comparer);
+    });
+  });
 
   test("Matrix multi-select in panel", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {