diff --git a/src/defaultV2-theme/defaultV2.m600.scss b/src/defaultV2-theme/defaultV2.m600.scss index 7fa459233a..d5277a705f 100644 --- a/src/defaultV2-theme/defaultV2.m600.scss +++ b/src/defaultV2-theme/defaultV2.m600.scss @@ -62,6 +62,7 @@ .sd-multipletext__item { flex-basis: 0; + min-width: 0; .sd-input { padding: 0; @@ -84,7 +85,12 @@ .sd-multipletext__item { flex-basis: auto; + min-width: auto; width: 100%; + + .sd-input { + width: 100%; + } } } } diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-empty.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-empty.png new file mode 100644 index 0000000000..bc18c4b68a Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-empty.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-focus.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-focus.png new file mode 100644 index 0000000000..c5424aef74 Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date-focus.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date.png new file mode 100644 index 0000000000..47663a7529 Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-multipletext-date.png differ diff --git a/visualRegressionTests/tests/defaultV2/responsiveness.ts b/visualRegressionTests/tests/defaultV2/responsiveness.ts index dff4f3d220..888b7687e5 100644 --- a/visualRegressionTests/tests/defaultV2/responsiveness.ts +++ b/visualRegressionTests/tests/defaultV2/responsiveness.ts @@ -434,6 +434,43 @@ frameworks.forEach(framework => { await takeElementScreenshot("responsiveness-multipletext.png", Selector(".sd-question"), t, comparer); }); }); + test("Check multipletext with inputType 'date' on small screen", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(600, 1080); + await initSurvey(framework, { + showQuestionNumbers: "off", + questions: [ + { + type: "multipletext", + name: "q1", + title: "Personal Information", + colCount: 2, + items: [ + { + name: "item1", + inputType: "date", + title: "Depature Date " + }, + { + name: "item2", + inputType: "date", + title: "Arrival Date " + }, + ] + }, + ] + }); + const inputSelector = Selector(".sd-input"); + await takeElementScreenshot("responsiveness-multipletext-date-empty.png", Selector(".sd-question"), t, comparer); + await t.click(inputSelector.nth(0)); + await takeElementScreenshot("responsiveness-multipletext-date-focus.png", Selector(".sd-question"), t, comparer); + await t.typeText(inputSelector.nth(1), "2004-01-12") + .click(inputSelector.nth(2)) + .typeText(inputSelector.nth(3), "2004-02-12"); + await resetFocusToBody(); + await takeElementScreenshot("responsiveness-multipletext-date.png", Selector(".sd-question"), t, comparer); + }); + }); test("Check multicolumn checkbox question on small screen", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(600, 1080);