#6877 Mobile: Do not use min size for mobiles

Fixes #6877
surveyjs · Sep 7, 2023 · 5e32dbd · 5e32dbd
1 parent 919b6eb
commit 5e32dbd
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/src/question.ts b/src/question.ts
@@ -101,6 +101,7 @@ export class Question extends SurveyElement<Question>
   protected setIsMobile(val: boolean) { }
 
   @property({ defaultValue: false, onSet: (val: boolean, target: Question) => {
+    target.renderMinWidth = !val;
     target.setIsMobile(val);
   } }) isMobile: boolean;
   @property() forceIsInputReadOnly: boolean;

diff --git a/src/survey-element.ts b/src/survey-element.ts
@@ -907,14 +907,16 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
   }
 
   @property({ defaultValue: true }) allowRootStyle: boolean;
+  @property({ defaultValue: true }) renderMinWidth: boolean;
+
   get rootStyle() {
     var style: { [index: string]: any } = {};
     if (this.allowRootStyle && this.renderWidth) {
       // style["width"] = this.renderWidth;
       style["flexGrow"] = 1;
       style["flexShrink"] = 1;
       style["flexBasis"] = this.renderWidth;
-      style["minWidth"] = this.minWidth;
+      style["minWidth"] = this.renderMinWidth ? this.minWidth : "";
       style["maxWidth"] = this.maxWidth;
     }
     return style;

diff --git a/tests/surveyElementTests.ts b/tests/surveyElementTests.ts
@@ -237,6 +237,33 @@ QUnit.test("allowRootStyle", function (assert) {
   survey.css = defaultV2Css;
   assert.deepEqual(q1.rootStyle, {});
 });
+QUnit.test("rootStyle on mobile", function (assert) {
+  StylesManager.applyTheme("default");
+  const survey = new SurveyModel({
+    elements: [{
+      type: "text",
+      name: "q1"
+    }]
+  });
+  const q1 = survey.getQuestionByName("q1");
+  assert.ok(q1.renderMinWidth);
+  assert.deepEqual(q1.rootStyle, {
+    "flexBasis": "100%",
+    "flexGrow": 1,
+    "flexShrink": 1,
+    "maxWidth": "100%",
+    "minWidth": "300px",
+  });
+  survey.setIsMobile(true);
+  assert.notOk(q1.renderMinWidth);
+  assert.deepEqual(q1.rootStyle, {
+    "flexBasis": "100%",
+    "flexGrow": 1,
+    "flexShrink": 1,
+    "maxWidth": "100%",
+    "minWidth": ""
+  });
+});
 QUnit.test("question.errorLocation", function (assert) {
   const survey = new SurveyModel({
     elements: [