diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts index af091e48fd..a2f5762039 100644 --- 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 index 77e6691a2d..c87e3eb4c6 100644 --- 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 index dc7c393541..9e9ce6ba3c 100644 --- 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 index e5a6f270d1..ca5ec0b7e6 100644 --- 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"); +}); \ No newline at end of file