Survey element min width: take widthScale into account (#9199)

Fixes #9198 Co-authored-by: tsv2013 <[email protected]>
surveyjs · Dec 24, 2024 · f49df2c · f49df2c
1 parent f82dc53
commit f49df2c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/packages/survey-core/src/survey-element.ts b/packages/survey-core/src/survey-element.ts
@@ -1069,8 +1069,18 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
       }
     }
     if (Object.keys(style).length == 0) {
-      let minWidth = this.minWidth;
-      if (minWidth != "auto") minWidth = "min(100%, " + minWidth + ")";
+      let minWidth: any = this.minWidth;
+      if (!!minWidth && minWidth != "auto") {
+        if (minWidth.indexOf("px") != -1 && this.survey) {
+          minWidth = minWidth.replace("px", "");
+          let minWidthNum = parseFloat(minWidth);
+          if (!isNaN(minWidthNum)) {
+            minWidth = minWidthNum * (this.survey as any).widthScale / 100;
+            minWidth = "" + minWidth + "px";
+          }
+        }
+        minWidth = "min(100%, " + minWidth + ")";
+      }
       if (this.allowRootStyle && this.renderWidth) {
         // style["width"] = this.renderWidth;
         style["flexGrow"] = 1;

diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts
@@ -7380,7 +7380,11 @@ export class SurveyModel extends SurveyElementCore
     if (width && !isNaN(width)) width = width + "px";
     return isStaticWidth && width || undefined;
   }
-  @property({ defaultValue: 100 }) widthScale: number;
+  @property({
+    defaultValue: 100, onSet(val: number, target: SurveyModel, prevVal: number) {
+      target.pages.forEach(p => p.updateRootStyle());
+    },
+  }) widthScale: number;
   @property() staticStartWidth: number;
   public setStaticStartWidth(width: number): void {
     this.staticStartWidth = width;

diff --git a/packages/survey-core/tests/surveywidthmodetests.ts b/packages/survey-core/tests/surveywidthmodetests.ts
@@ -221,3 +221,21 @@ QUnit.test("Survey width scaling", function (assert) {
   assert.equal(survey.isScaled, true);
   assert.equal(survey.renderedWidth, "900px");
 });
+
+QUnit.test("Question min width scaling", function (assert) {
+  var survey = new SurveyModel({
+    "elements": [
+      {
+        "type": "text",
+        "name": "question1",
+      },
+    ]
+  });
+  const q = survey.getAllQuestions()[0];
+  assert.equal(survey.widthScale, 100);
+  assert.equal(q.rootStyle["minWidth"], "min(100%, 300px)");
+
+  survey.widthScale = 50;
+  assert.equal(survey.widthScale, 50);
+  assert.equal(q.rootStyle["minWidth"], "min(100%, 150px)");
+});