#6096 Multi-Select Matrix: Boolean question is not aligned within a c…

…olumn (#6212) * #6096 Multi-Select Matrix: Boolean question is not aligned within a column Fixes #6096 * #6096 Multi-Select Matrix: Boolean question is not aligned within a column Fixes #6096 * #6096 - markup update
surveyjs · May 18, 2023 · 7dd9e55 · 7dd9e55
1 parent d9bc961
commit 7dd9e55
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 3 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -247,7 +247,7 @@ export var defaultV2Css = {
   },
   boolean: {
     mainRoot: "sd-element sd-question sd-row__question sd-question--boolean",
-    root: "sv_qcbc sv_qbln sd-scrollable-container",
+    root: "sv_qcbc sv_qbln sd-scrollable-container sd-boolean-root",
     rootRadio: "sv_qcbc sv_qbln sd-scrollable-container sd-scrollable-container--compact",
     item: "sd-boolean",
     itemOnError: "sd-boolean--error",

diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -346,3 +346,8 @@
     padding-top: calcSize(1);
   }
 }
+.sd-table__question-wrapper {
+  .sd-boolean-root {
+      margin: auto;
+    }
+}
diff --git a/tests/markup/snapshots/boolean-v2.snap.html b/tests/markup/snapshots/boolean-v2.snap.html
@@ -1,4 +1,4 @@
-<div class="sd-scrollable-container sv_qbln sv_qcbc">
+<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
 	<label class="sd-boolean sd-boolean--allowhover sd-boolean--indeterminate">
 		<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="">
 		<div class="sd-boolean__thumb-ghost">

diff --git a/tests/markup/snapshots/boolean-value-v2.snap.html b/tests/markup/snapshots/boolean-value-v2.snap.html
@@ -1,4 +1,4 @@
-<div class="sd-scrollable-container sv_qbln sv_qcbc">
+<div class="sd-boolean-root sd-scrollable-container sv_qbln sv_qcbc">
 	<label class="sd-boolean sd-boolean--allowhover sd-boolean--checked">
 		<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="true">
 		<div class="sd-boolean__thumb-ghost">

diff --git a/...RegressionTests/tests/defaultV2/etalons/question-matrix-with-boolean-column.png b/...RegressionTests/tests/defaultV2/etalons/question-matrix-with-boolean-column.png
diff --git a/visualRegressionTests/tests/defaultV2/matrix.ts b/visualRegressionTests/tests/defaultV2/matrix.ts
@@ -344,4 +344,36 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Matrix with boolean column", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        "elements": [
+          {
+            "type": "matrixdropdown",
+            "name": "question1",
+            "columns": [
+              {
+                "name": "Column 1"
+              },
+              {
+                "name": "Column 3",
+                "title": "Column 2",
+                "cellType": "boolean"
+              }
+            ],
+            "rows": [
+              "Row 1",
+              "Row 2"
+            ]
+          }
+        ],
+        "widthMode": "static",
+        "width": "1000"
+      });
+      const questionRoot = Selector(".sd-table");
+      await takeElementScreenshot("question-matrix-with-boolean-column.png", questionRoot, t, comparer);
+    });
+  });
+
 });