work for #6655

surveyjs · Sep 4, 2023 · 855cfcf · 855cfcf
1 parent 772b014
commit 855cfcf
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 40 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -16,10 +16,11 @@ export var defaultV2Css = {
   rootReadOnly: "sd-root--readonly",
   rootCompact: "sd-root--compact",
   rootFitToContainer: "sd-root-modern--full-container",
+  rootWrapper: "sd-root-modern__wrapper",
+  rootWrapperAbsolute: "sd-root-modern__wrapper--absolute",
   rootBackgroundImage: "sd-root_background-image",
   rootBackgroundImageFixed: "sd-root_background-image--fixed",
   rootForm: "sd-root_form",
-  rootFormAbsolute: "sd-root_form--absolute",
   container: "sd-container-modern",
   header: "sd-title sd-container-modern__title",
   bodyContainer: "sv-components-row",

diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
@@ -118,11 +118,6 @@
   left: 0;
   right: 0;
 }
-.sd-root-modern--full-container .sd-root_background-image {
-  z-index: -1;
-}
 .sd-root-modern--full-container .sd-root_background-image.sd-root_background-image--fixed {
-  position: sticky;
-  height: 100%;
-  z-index: 0;
+  right: 12px;
 }
diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss
@@ -128,19 +128,21 @@ body {
   }
 }
 
-.sd-root-modern--full-container form.sd-root_form--absolute {
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
 .sd-root-modern--mobile {
   --sd-timer-size: calc(9 * #{$base-unit});
 }
 
+.sd-root-modern__wrapper {
+  position: relative;
+}
+
+.sd-root-modern--full-container .sd-root-modern__wrapper--absolute {
+  position: static;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+
 .sv-popup {
   .sv-popup__scrolling-content {
     scrollbar-width: thin;

diff --git a/src/knockout/templates/index.html b/src/knockout/templates/index.html
@@ -5,13 +5,11 @@
 
 <script type="text/html" id="survey-content-template">
   <div data-bind="css: rootCss, elementStyle: themeVariables">
-      <!-- ko if: !!renderBackgroundImage && ($data.backgroundImageFixed || !$data.fitToContainer)-->
+    <div data-bind="css: wrapperFormCss">
+      <!-- ko if: !!renderBackgroundImage -->
       <div data-bind="css: backgroundImageCss, elementStyle: backgroundImageStyle"></div>
       <!-- /ko -->
-      <form data-bind="css: formCss" onsubmit="return false;">
-          <!-- ko if: !!renderBackgroundImage && !$data.backgroundImageFixed && $data.fitToContainer -->
-          <div data-bind="css: backgroundImageCss, elementStyle: backgroundImageStyle"></div>
-          <!-- /ko -->
+      <form data-bind="css: css.rootForm" onsubmit="return false;">
           <div class="sv_custom_header" data-bind="visible: !hasLogo"></div>
           <div data-bind="css: containerCss">
               <!-- ko template: { name: koTitleTemplate, afterRender: koAfterRenderHeader } -->
@@ -55,5 +53,6 @@
       <!-- /ko -->
       <!-- ko component: { name: 'sv-notifier', params: { notifier: notifier } } -->
       <!-- /ko -->
+    </div>
   </div>
 </script>
diff --git a/src/react/reactSurvey.tsx b/src/react/reactSurvey.tsx
@@ -107,19 +107,20 @@ export class Survey extends SurveyElementBase<any, any>
 
     return (
       <div id={this.rootNodeId} ref={this.rootRef} className={cssClasses} style={this.survey.themeVariables}>
-        {!!backgroundImage && (this.survey.backgroundImageFixed || !this.survey.fitToContainer) ? backgroundImage: null}
-        <form className={this.survey.formCss} onSubmit={onSubmit}>
-          {!!backgroundImage && !this.survey.backgroundImageFixed && this.survey.fitToContainer ? backgroundImage: null}
-          {customHeader}
-          <div className={this.css.container}>
-            {header}
-            <ComponentsContainer survey={this.survey} container={"header"} needRenderWrapper={false}></ComponentsContainer>
-            {renderResult}
-            <ComponentsContainer survey={this.survey} container={"footer"} needRenderWrapper={false}></ComponentsContainer>
-          </div>
-        </form>
-        { this.survey.showBrandInfo ? <BrandInfo/> : null }
-        <NotifierComponent notifier={this.survey.notifier} ></NotifierComponent>
+        <div className={this.survey.wrapperFormCss}>
+          {!!backgroundImage ? backgroundImage: null}
+          <form className={this.css.rootForm} onSubmit={onSubmit}>
+            {customHeader}
+            <div className={this.css.container}>
+              {header}
+              <ComponentsContainer survey={this.survey} container={"header"} needRenderWrapper={false}></ComponentsContainer>
+              {renderResult}
+              <ComponentsContainer survey={this.survey} container={"footer"} needRenderWrapper={false}></ComponentsContainer>
+            </div>
+          </form>
+          { this.survey.showBrandInfo ? <BrandInfo/> : null }
+          <NotifierComponent notifier={this.survey.notifier} ></NotifierComponent>
+        </div>
       </div>
     );
   }

diff --git a/src/survey.ts b/src/survey.ts
@@ -1055,7 +1055,7 @@ export class SurveyModel extends SurveyElementCore
     this.updateNavigationCss();
     this.updateCompletedPageCss();
     this.updateBackgroundImageCss();
-    this.updateFormCss();
+    this.updateWrapperFormCss();
   }
   /**
    * Gets or sets an object in which keys are UI elements and values are CSS classes applied to them.
@@ -2067,11 +2067,11 @@ export class SurveyModel extends SurveyElementCore
       .append(this.css.rootBackgroundImageFixed, this.backgroundImageFixed)
       .toString();
   }
-  @property() formCss: string;
-  public updateFormCss(): void {
-    this.formCss = new CssClassBuilder()
-      .append(this.css.rootForm)
-      .append(this.css.rootFormAbsolute, this.backgroundImageFixed)
+  @property() wrapperFormCss: string;
+  public updateWrapperFormCss(): void {
+    this.wrapperFormCss = new CssClassBuilder()
+      .append(this.css.rootWrapper)
+      .append(this.css.rootWrapperAbsolute, this.backgroundImageFixed)
       .toString();
   }
   /**