Work for #7217: fix matrix shows header in mobile mode when showHeade…

…r: false (#7267)
surveyjs · Oct 31, 2023 · 4c97513 · 4c97513
1 parent f81f7f7
commit 4c97513
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 16 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -40,6 +40,7 @@
 .sd-table--no-header {
   padding-top: calcSize(3);
 }
+
 .sd-panel:not(.sd-panel--as-page) {
   &>.sd-panel__content {
     .sd-table--no-header {
@@ -444,7 +445,7 @@
   .sd-table {
     tr {
       display: flex;
-        flex-direction: column;
+      flex-direction: column;
     }
   }
 
@@ -453,32 +454,38 @@
       padding-top: calcSize(1);
     }
   }
- .sd-table__row {
+
+  .sd-table__row {
     padding-top: calcSize(2);
- }
- .sd-table__row--expanded {
-   .sd-table__cell-action--show-detail-mobile {
-	 display: none;
-   }
- }
+  }
+
+  .sd-table__row--expanded {
+    .sd-table__cell-action--show-detail-mobile {
+      display: none;
+    }
+  }
 
   .sd-table:not(.sd-matrix__table) {
     .sd-table__row {
       padding-bottom: calcSize(2);
+
       &.sd-table__row--has-end-actions {
         padding-bottom: calcSize(0);
       }
     }
-  
-    tr:not(.sd-table__row--has-end-actions){
+
+    tr:not(.sd-table__row--has-end-actions) {
       &:not(:last-of-type) {
         padding-bottom: calcSize(3);
+
         &::after {
           bottom: calcSize(-3);
         }
       }
+
       padding-bottom: calcSize(0);
     }
+
     tr:not(.sd-table__row--expanded) {
       &::after {
         z-index: 12;
@@ -495,8 +502,10 @@
     }
   }
 
-  .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type  {
-    .sd-table__cell-action--show-detail-mobile, .sd-table__cell-action--remove-row {
+  .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type {
+
+    .sd-table__cell-action--show-detail-mobile,
+    .sd-table__cell-action--remove-row {
       margin-bottom: calcSize(-2);
     }
   }
@@ -507,7 +516,7 @@
 
   .sd-table__cell {
     border-top: none;
-      border-bottom: none;
+    border-bottom: none;
     display: block;
     padding-top: 0;
     padding-bottom: 0;
@@ -520,13 +529,14 @@
 
   .sd-table__cell--error {
     margin-top: calcSize(0);
+
     &.sd-table__cell--error-bottom {
       .sd-question__erbox {
         margin-top: calcSize(1);
       }
     }
   }
-  
+
   .sd-table__cell:first-of-type,
   .sd-matrix__cell {
     margin-top: 0;
@@ -542,6 +552,16 @@
     }
   }
 
+  .sd-table--no-header {
+    padding-top: 0;
+
+    .sd-table__cell {
+      &::before {
+        content: none;
+      }
+    }
+  }
+
   .sd-matrix__cell,
   .sd-table__cell--actions,
   .sd-table__cell--row-text,
@@ -550,26 +570,29 @@
       content: none;
     }
   }
+
   .sd-table__cell--detail-panel {
     padding-top: 0;
     padding-bottom: 0;
     border-top: 0;
     border-bottom: 0;
 
-  .sd-panel__content {
+    .sd-panel__content {
       padding-top: 0;
     }
   }
+
   .sd-table__cell.sd-table__cell--actions {
     width: auto;
     margin-top: calcSize(1);
-      margin-bottom: calcSize(1);
+    margin-bottom: calcSize(1);
 
     .sd-action-bar {
       margin-right: calcSize(-3);
       margin-left: calcSize(-3);
       background: $background;
     }
+
     #show-detail-mobile {
       flex-grow: 1;
     }

diff --git a/...nTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-without-header.png b/...nTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-without-header.png
diff --git a/visualRegressionTests/tests/defaultV2/matrix.ts b/visualRegressionTests/tests/defaultV2/matrix.ts
@@ -1198,4 +1198,54 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("question-matrix--single-page.png", pageElement, t, comparer);
     });
   });
+  test("Check mobile multi select matrix with showHeader: false", async (t) => {
+    await t.resizeWindow(600, 1080);
+    await wrapVisualTest(t, async (t, comparer) => {
+      await initSurvey(framework, {
+        elements: [
+          {
+            "type": "matrixdropdown",
+            "name": "q1",
+            "title": "Question",
+            "showHeader": false,
+            "cellType": "text",
+            "columns": [
+              {
+                "name": "Column 1",
+                "title": "Title"
+              },
+              {
+                "name": "Column 2",
+                "title": "Title"
+              },
+              {
+                "name": "Column 3",
+                "title": "Title"
+              },
+              {
+                "name": "Column 4",
+                "title": "Title"
+              },
+              {
+                "name": "Column 5",
+                "title": "Title"
+              }
+            ],
+            "rows": [
+              {
+                "value": "Row 1",
+                "text": "Title"
+              },
+              {
+                "value": "Row 2",
+                "text": "Title"
+              },
+            ]
+          }
+        ]
+      });
+      await takeElementScreenshot("responsiveness-matrixdropdown-without-header.png", Selector(".sd-question"), t, comparer);
+    });
+  });
 });
+