Scrollbars appear on Creator Preview and Theme tabs (#8291)

Fixes #8289 Co-authored-by: Aleksey Novikov <novikov@abrisplatform.com>
surveyjs · May 18, 2024 · debb742 · debb742
1 parent 2d9c7a8
commit debb742
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -19,6 +19,7 @@ export var defaultV2Css = {
   rootFitToContainer: "sd-root-modern--full-container",
   rootWrapper: "sd-root-modern__wrapper",
   rootWrapperFixed: "sd-root-modern__wrapper--fixed",
+  rootWrapperHasImage: "sd-root-modern__wrapper--has-image",
   rootBackgroundImage: "sd-root_background-image",
   container: "sd-container-modern",
   header: "sd-title sd-container-modern__title",

diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss
@@ -96,6 +96,9 @@ body {
 
 .sd-root-modern__wrapper {
   position: relative;
+}
+
+.sd-root-modern__wrapper--has-image {
   min-height: 100%;
 }
 

diff --git a/src/survey.ts b/src/survey.ts
@@ -2179,7 +2179,11 @@ export class SurveyModel extends SurveyElementCore
    * An image to display in the background of the survey or form. Accepts a base64 or URL string value.
    * @see backgroundOpacity
    */
-  @property() backgroundImage: string;
+  @property({
+    onSet: (newValue, target: SurveyModel) => {
+      target.updateCss();
+    }
+  }) backgroundImage: string;
   @property() renderBackgroundImage: string;
   private updateRenderBackgroundImage(): void {
     const path = this.backgroundImage;
@@ -2213,7 +2217,8 @@ export class SurveyModel extends SurveyElementCore
   public updateWrapperFormCss(): void {
     this.wrapperFormCss = new CssClassBuilder()
       .append(this.css.rootWrapper)
-      .append(this.css.rootWrapperFixed, this.backgroundImageAttachment === "fixed")
+      .append(this.css.rootWrapperHasImage, !!this.backgroundImage)
+      .append(this.css.rootWrapperFixed, !!this.backgroundImage && this.backgroundImageAttachment === "fixed")
       .toString();
   }
   /**

diff --git a/tests/surveytests.ts b/tests/surveytests.ts
@@ -19672,3 +19672,13 @@ QUnit.test("getContainerContent - do not show buttons progress in the single pag
   assert.deepEqual(getContainerContent("left"), [], "");
   assert.deepEqual(getContainerContent("right"), [], "");
 });
+QUnit.test("Display mode in design time", function (assert) {
+  const survey = new SurveyModel();
+  assert.equal(survey.wrapperFormCss, "sd-root-modern__wrapper");
+
+  survey.backgroundImage = "abc";
+  assert.equal(survey.wrapperFormCss, "sd-root-modern__wrapper sd-root-modern__wrapper--has-image");
+
+  survey.backgroundImageAttachment = "fixed";
+  assert.equal(survey.wrapperFormCss, "sd-root-modern__wrapper sd-root-modern__wrapper--has-image sd-root-modern__wrapper--fixed");
+});