#7871 In static width mode, choices with a long text overlaps a quest…

…ion's area (#7877) * #7871 In static width mode, choices with a long text overlaps a question's area Fixes #7871 * #7871 In static width mode, choices with a long text overlaps a question's area Fixes #7871 * In static width mode, choices with a long text overlaps a question's area #7871 --------- Co-authored-by: Aleksey Novikov <[email protected]>
surveyjs · Feb 26, 2024 · dc9d5ed · dc9d5ed
1 parent 0759c42
commit dc9d5ed
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 0 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-item.scss b/src/defaultV2-theme/blocks/sd-item.scss
@@ -53,6 +53,14 @@
   white-space: normal;
   width: 100%;
   text-align: left;
+  min-width: 0;
+
+  .sv-string-viewer {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
 }
 
 .sd-item--disabled .sd-item__control-label {

diff --git a/src/defaultV2-theme/blocks/sd-selectbase.scss b/src/defaultV2-theme/blocks/sd-selectbase.scss
@@ -26,6 +26,7 @@
   position: relative;
   gap: calcSize(1);
   vertical-align: top;
+  max-width: 100%;
 }
 
 .sd-selectbase__column {
@@ -36,6 +37,7 @@
   display: block;
   box-sizing: border-box;
   flex: 1 1 0px;
+  min-width: 0;
 }
 
 .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/visualRegressionTests/tests/defaultV2/question.ts b/visualRegressionTests/tests/defaultV2/question.ts
@@ -1016,4 +1016,63 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("question-empty-title-height.png", questionRows.nth(0), t, comparer);
     });
   });
+
+  test("Question content scroll", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "radiogroup",
+                "name": "question2",
+                "choices": [
+                  {
+                    "value": "Item 1",
+                    "text": "11111111111111111111111"
+                  },
+                  {
+                    "value": "Item 2",
+                    "text": "2222222222222222222222222222"
+                  },
+                  {
+                    "value": "Item 3",
+                    "text": "333333333333333"
+                  },
+                  {
+                    "value": "Item 4",
+                    "text": "44444444444444444444444444444"
+                  },
+                  {
+                    "value": "Item 5",
+                    "text": "555555555555555555555555"
+                  },
+                  {
+                    "value": "Item 6",
+                    "text": "6666666666666"
+                  },
+                  {
+                    "value": "Item 7",
+                    "text": "7777777777777777777777777"
+                  },
+                  {
+                    "value": "Item 8",
+                    "text": "88888888888888888888888888888888888888"
+                  }
+                ],
+                "colCount": 3
+              }
+            ]
+          }
+        ],
+        "showQuestionNumbers": "off",
+        "widthMode": "static",
+        "width": "650"
+      });
+      const question = Selector(".sd-question");
+      await takeElementScreenshot("question-multicolumn-overflow.png", question, t, comparer);
+    });
+  });
 });