Merge pull request #6903 from surveyjs/issue/6879-Mobile-Do-not-use-a…

…lt-row-style-in-matrix-question #6879 Mobile: Do not use alt-row style in matrix question
surveyjs · Sep 7, 2023 · 8ef2d6d · 8ef2d6d
2 parents 919b6eb + 6d323db
commit 8ef2d6d
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 37 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -80,49 +80,51 @@
   }
 }
 
-.sd-table--alternate-rows {
-  margin-left: calcSize(1);
-  margin-right: calcSize(1);
-  width: calc(100% - 2 * #{$base-unit});
-
-  .sd-table__cell:not(.sd-table__cell--header):first-of-type {
-    padding-left: calcSize(2);
-  }
-
-  .sd-table__cell:last-of-type {
-    padding-right: calcSize(2);
-  }
-
-  .sd-table__row:nth-of-type(odd) {
-
-    &>td,
-    td:first-of-type {
-      background-color: $background-dim-light;
-
-      &.sd-matrix__text--checked {
-        background-color: $primary-light;
-      }
-
-      .sd-input {
-        background-color: $primary-foreground;
-      }
-
-      .sd-item:not(.sd-item--error) {
-        .sd-item__decorator {
-          background-color: var(--sjs-general-backcolor, var(--background, #fff));
-        }
-
-        &.sd-item--checked .sd-item__decorator {
-          background-color: $primary;
+.sd-root-modern:not(.sd-root-modern--mobile) {
+  .sd-table--alternate-rows {
+    margin-left: calcSize(1);
+    margin-right: calcSize(1);
+    width: calc(100% - 2 * #{$base-unit});
+
+    .sd-table__cell:not(.sd-table__cell--header):first-of-type {
+      padding-left: calcSize(2);
+    }
+
+    .sd-table__cell:last-of-type {
+      padding-right: calcSize(2);
+    }
+
+    .sd-table__row:nth-of-type(odd) {
+
+      &>td,
+      td:first-of-type {
+        background-color: $background-dim-light;
+
+        &.sd-matrix__text--checked {
+          background-color: $primary-light;
         }
-
-        &.sd-radio--checked .sd-radio__control:focus+.sd-radio__decorator:after {
+  
+        .sd-input {
           background-color: $primary-foreground;
         }
+
+        .sd-item:not(.sd-item--error) {
+          .sd-item__decorator {
+            background-color: var(--sjs-general-backcolor, var(--background, #fff));
+          }
+
+          &.sd-item--checked .sd-item__decorator {
+            background-color: $primary;
+          }
+
+          &.sd-radio--checked .sd-radio__control:focus+.sd-radio__decorator:after {
+            background-color: $primary-foreground;
+          }
+        }
       }
     }
   }
-}
+} 
 
 .sd-table__cell {
   font-weight: normal;

diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrix-alt-rows.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrix-alt-rows.png
diff --git a/visualRegressionTests/tests/defaultV2/responsiveness.ts b/visualRegressionTests/tests/defaultV2/responsiveness.ts
@@ -214,6 +214,37 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("responsiveness-matrix.png", Selector(".sd-question"), t, comparer);
     });
   });
+  test("Check matrix on small screen - alt rows", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(600, 1080);
+      await initSurvey(framework, {
+        showQuestionNumbers: "off",
+        elements: [
+          {
+            "type": "matrix",
+            "name": "Quality",
+            "alternateRows": true,
+            "title": "Please indicate if you agree or disagree with the following statements",
+            "columns": ["Strongly Disagree",
+              "Disagree",
+              "Neutral",
+              "Agree",
+              "Strongly Agree",
+            ],
+            "rows": [
+              "Product is affordable",
+              "Product does what it claims",
+              "Product is better than other products on the market"
+            ]
+          }
+        ]
+      });
+      await ClientFunction(() => {
+        document.body.focus();
+      })();
+      await takeElementScreenshot("responsiveness-matrix-alt-rows.png", Selector(".sd-question"), t, comparer);
+    });
+  });
   test("Check matrixdynamic on small screen", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(600, 1080);