diff --git a/src/defaultV2-theme/blocks/sd-imagepicker.scss b/src/defaultV2-theme/blocks/sd-imagepicker.scss index ccd2e7d7d2..bfc957ab1a 100644 --- a/src/defaultV2-theme/blocks/sd-imagepicker.scss +++ b/src/defaultV2-theme/blocks/sd-imagepicker.scss @@ -132,6 +132,10 @@ align-items: flex-start; padding-right: 0; + &.sd-selectbase__column { + min-width: 0; + } + .sd-imagepicker__item { width: 100%; } diff --git a/src/defaultV2-theme/blocks/sd-question.scss b/src/defaultV2-theme/blocks/sd-question.scss index a802cb1aa9..61090ce395 100644 --- 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 index 11696bcff1..5034a7dc6e 100644 --- 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 index 1f38437506..03b3ac7cfc 100644 Binary files a/visualRegressionTests/tests/defaultV2/etalons/question-multicolumn-overflow.png and b/visualRegressionTests/tests/defaultV2/etalons/question-multicolumn-overflow.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-small.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-small.png new file mode 100644 index 0000000000..48efa27315 Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-small.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-wide.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-wide.png new file mode 100644 index 0000000000..c0ebc5f2e2 Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-wide.png differ diff --git a/visualRegressionTests/tests/defaultV2/responsiveness.ts b/visualRegressionTests/tests/defaultV2/responsiveness.ts index eedaab8db0..727974a36d 100644 --- 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);