fixed checkboxes adaptifity

Fixed surveyjs/service#2255
surveyjs · Aug 2, 2024 · 076c578 · 076c578
1 parent 496ad97
commit 076c578
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 1 deletion.
diff --git a/src/defaultV2-theme/blocks/sd-question.scss b/src/defaultV2-theme/blocks/sd-question.scss
@@ -122,6 +122,7 @@
   display: inline-block;
   flex: 1;
   margin-top: calc(0.25 * var(--sd-base-vertical-padding)) 0;
+  max-width: 100%;
 }
 
 .sd-element--with-frame > .sd-question__content--left {

diff --git a/src/defaultV2-theme/blocks/sd-selectbase.scss b/src/defaultV2-theme/blocks/sd-selectbase.scss
@@ -19,6 +19,8 @@
 .sd-selectbase--multi-column {
   display: flex;
   flex: 1 1 0px;
+  flex-wrap: nowrap;
+  overflow: auto;
 }
 
 .sd-selectbase__label {
@@ -37,7 +39,7 @@
   display: block;
   box-sizing: border-box;
   flex: 1 1 0px;
-  min-width: 0;
+  max-width: 100%;
 }
 
 .sd-selectbase__column:not(:last-child) {

diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-multicolumn-overflow.png b/visualRegressionTests/tests/defaultV2/etalons/question-multicolumn-overflow.png
diff --git a/...sionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-small.png b/...sionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-small.png
diff --git a/...ssionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-wide.png b/...ssionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-wide.png
diff --git a/visualRegressionTests/tests/defaultV2/responsiveness.ts b/visualRegressionTests/tests/defaultV2/responsiveness.ts
@@ -493,6 +493,51 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check multicolumn checkbox question doesn't fit width", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1600, 1080);
+      await initSurvey(framework, {
+        showQuestionNumbers: "off",
+        "widthMode": "static",
+        "width": "60%",
+        questions: [
+          {
+            "type": "checkbox",
+            "name": "contract-type",
+            "title": "Type of contract ",
+            "choices": [
+              {
+                "value": "Item 1",
+                "text": "Permanent"
+              },
+              {
+                "value": "Item 2",
+                "text": "Fixed-Term"
+              },
+              {
+                "value": "Item 3",
+                "text": "All year round"
+              },
+              {
+                "value": "Item 4",
+                "text": "Term-time only"
+              },
+              {
+                "value": "Item 5",
+                "text": "Annualized"
+              }
+            ],
+            "colCount": 5
+          }
+        ]
+      });
+      await takeElementScreenshot("responsiveness-checkbox-col-count-5-wide.png", Selector(".sd-question"), t, comparer);
+      await t.resizeWindow(1000, 1080);
+      await resetFocusToBody();
+      await takeElementScreenshot("responsiveness-checkbox-col-count-5-small.png", Selector(".sd-question"), t, comparer);
+    });
+  });
+
   test("Check image question", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);