#7106 Matrix with no title. Structure = on a single page. (#7124)

* #7106 Matrix with no title. Structure = on a single page. Fixes #7106 * #7106 - edit css rule * #7106 Matrix with no title. Structure = on a single page - fix css Fixes #7106 * #7106 - make css rule stronger
surveyjs · Oct 13, 2023 · 12e3d95 · 12e3d95
1 parent cc9f264
commit 12e3d95
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 39 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -40,51 +40,55 @@
 .sd-table--no-header {
   padding-top: calcSize(3);
 }
-
-.sd-panel__content {
-  .sd-table--no-header {
-    padding-top: 0;
-  }
-
-  .sd-question--table {
-    .sd-question__content {
-      padding-top: calcSize(0);
+.sd-panel:not(.sd-panel--as-page) {
+  &>.sd-panel__content {
+    .sd-table--no-header {
+      padding-top: 0;
     }
 
-    &>.sd-question__header {
-      &+.sd-question__content {
-        padding-top: calcSize(2);
+    .sd-question--table {
+      .sd-question__content {
+        padding-bottom: calcSize(0.25);
+        margin-bottom: calcSize(-0.25);
+        padding-top: calcSize(1);
+        margin-top: calcSize(-1);
+      }
+
+      &>.sd-question__header {
+        &+.sd-question__content {
+          padding-top: calcSize(2);
 
-        .sd-table--no-header {
-          padding-top: calcSize(4);
+          .sd-table--no-header {
+            padding-top: calcSize(4);
+          }
         }
       }
     }
-  }
 
 
-  .sd-question--table>.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-    margin-top: calcSize(-3);
-  }
+    .sd-question--table>.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+      margin-top: calcSize(-3);
+    }
 
-  .sd-question--table.sd-question--error-top>.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-    margin-top: 0;
-  }
+    .sd-question--table.sd-question--error-top>.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+      margin-top: 0;
+    }
 
-  &>.sd-row:not(:first-of-type) .sd-question--table>.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-    margin-top: calcSize(-2);
-  }
+    &>.sd-row:not(:first-of-type) .sd-question--table>.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+      margin-top: calcSize(-2);
+    }
 
-  &>.sd-row:not(:first-of-type) .sd-question--table.sd-question--error-top>.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-    margin-top: calcSize(0);
-  }
+    &>.sd-row:not(:first-of-type) .sd-question--table.sd-question--error-top>.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+      margin-top: calcSize(0);
+    }
 
-  .sd-question--table>.sd-question__header+.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-    margin-top: calcSize(1);
-  }
+    .sd-question--table>.sd-question__header+.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+      margin-top: calcSize(1);
+    }
 
-  &>.sd-row:not(:first-of-type) .sd-question--table>.sd-question__header+.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
-    margin-top: calcSize(1);
+    &>.sd-row:not(:first-of-type) .sd-question--table>.sd-question__header+.sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
+      margin-top: calcSize(1);
+    }
   }
 }
 
@@ -384,13 +388,6 @@
       min-width: auto;
       overflow-x: auto;
     }
-
-    &>.sd-question__content {
-      padding-bottom: calcSize(0.25);
-      margin-bottom: calcSize(-0.25);
-      padding-top: calcSize(1);
-      margin-top: calcSize(-1);
-    }
   }
 
   &.sd-element--nested>.sd-question__content,

diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix--single-page.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix--single-page.png
diff --git a/visualRegressionTests/tests/defaultV2/matrix.ts b/visualRegressionTests/tests/defaultV2/matrix.ts
@@ -1095,4 +1095,58 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Matrix in single page mode", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(800, 600);
+      await initSurvey(framework, {
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "matrix",
+                "name": "question1",
+                "titleLocation": "hidden",
+                "columns": [
+                  "Column 1",
+                  "Column 2",
+                  "Column 3"
+                ],
+                "rows": [
+                  "Row 1",
+                  "Row 2"
+                ]
+              }
+            ]
+          },
+          {
+            "name": "page2",
+            "elements": [
+              {
+                "type": "matrix",
+                "name": "question2",
+                "titleLocation": "hidden",
+                "columns": [
+                  "Column 1",
+                  "Column 2",
+                  "Column 3"
+                ],
+                "rows": [
+                  "Row 1",
+                  "Row 2"
+                ]
+              }
+            ]
+          }
+        ],
+        "questionsOnPageMode": "singlePage",
+        "focusFirstQuestionAutomatic": false,
+        "widthMode": "static"
+      });
+      //await t.click(Selector("body"), { offsetX: 5, offsetY: 5 });
+      const pageElement = Selector(".sd-page");
+
+      await takeElementScreenshot("question-matrix--single-page.png", pageElement, t, comparer);
+    });
+  });
 });