Fixed #6993 - Mobile: Incorrect question content paddings on design-s…

…urface (#6994) * Fixed #6993 - Mobile: Incorrect question content paddings on design-surface * Work for #6993 - Mobile: Incorrect question content paddings on design-surface - added tests --------- Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
surveyjs · Sep 22, 2023 · 29ca7ad · 29ca7ad
1 parent a9afd00
commit 29ca7ad
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 6 deletions.
diff --git a/src/question.ts b/src/question.ts
@@ -106,12 +106,9 @@ export class Question extends SurveyElement<Question>
   }
   public setIsMobile(val: boolean) {
     this.isMobile = val && (this.allowMobileInDesignMode() || !this.isDesignMode);
+    this.renderMinWidth = !val;
   }
-  @property({
-    defaultValue: false, onSet: (val, target) => {
-      target.renderMinWidth = !val;
-    }
-  }) isMobile: boolean;
+  @property({ defaultValue: false }) isMobile: boolean;
   @property() forceIsInputReadOnly: boolean;
 
   constructor(name: string) {

diff --git a/tests/surveytests.ts b/tests/surveytests.ts
@@ -15823,12 +15823,16 @@ QUnit.test("Check survey isMobile in design mode", function (assert) {
   const textQuestion = survey.getQuestionByName("q1");
   const multipleTextQuestion = survey.getQuestionByName("q2");
   const checkboxQuestion = survey.getQuestionByName("q3");
+  assert.ok(textQuestion.renderMinWidth);
   survey.setIsMobile(true);
   assert.ok(survey._isMobile);
   assert.notOk(survey.isMobile);
   assert.notOk(textQuestion.isMobile);
+  assert.notOk(textQuestion.renderMinWidth);
   assert.ok(multipleTextQuestion.isMobile);
+  assert.notOk(multipleTextQuestion.renderMinWidth);
   assert.ok(checkboxQuestion.isMobile);
+  assert.notOk(checkboxQuestion.renderMinWidth);
 });
 QUnit.test("Check survey isMobile is set correctly on adding new question", function (assert) {
   const survey = new SurveyModel({

diff --git a/...nTests/tests/defaultV2/etalons/responsive-question-inside-panels-in-creator.png b/...nTests/tests/defaultV2/etalons/responsive-question-inside-panels-in-creator.png
diff --git a/visualRegressionTests/tests/defaultV2/file.ts b/visualRegressionTests/tests/defaultV2/file.ts
@@ -87,7 +87,7 @@ frameworks.forEach(framework => {
         (window as any).survey.getAllQuestions()[0].resizeObserver.disconnect();
         (window as any).survey.getAllQuestions()[0].processResponsiveness = () => { };
         (window as any).survey.getAllQuestions()[0].pageSize = 1;
-        (window as any).survey.getAllQuestions()[0].isMobile = true;
+        (window as any).survey.getAllQuestions()[0].setIsMobile(true);
       })();
       await t.setFilesToUpload(Selector(".sd-file input"), ["files/SingleImage.jpg"]);
       const questionRoot = Selector(".sd-question");

diff --git a/visualRegressionTests/tests/defaultV2/panel.ts b/visualRegressionTests/tests/defaultV2/panel.ts
@@ -589,4 +589,49 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("panel-with-errors-without-title.png", panelRoot, t, comparer);
     });
   });
+  test("Check question min size inside panels in design mode", async (t) => {
+    if (framework == "vue") return;
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(350, 800);
+      await initSurvey(framework, {
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "panel",
+                "name": "panel1",
+                "elements": [
+                  {
+                    "type": "panel",
+                    "name": "panel2",
+                    "elements": [
+                      {
+                        "type": "panel",
+                        "name": "panel3",
+                        "elements": [
+                          {
+                            "type": "text",
+                            "name": "question1"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      });
+      const panelRoot = Selector(".sd-body");
+      await ClientFunction(() => {
+        (window as any).survey.setDesignMode(true);
+        (window as any).survey.setIsMobile(true);
+      })();
+      await resetFocusToBody();
+
+      await takeElementScreenshot("responsive-question-inside-panels-in-creator.png", panelRoot, t, comparer);
+    });
+  });
 });