Work for https://github.com/surveyjs/service/issues/1637 - background…

… image reveals some empty spaces
surveyjs · Nov 23, 2023 · d3e456c · d3e456c
1 parent a8dd03d
commit d3e456c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 51 deletions.
diff --git a/packages/survey-angular-ui/src/survey-content.component.html b/packages/survey-angular-ui/src/survey-content.component.html
@@ -9,18 +9,21 @@
           <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }"></ng-template>
           <div *ngIf="model.isShowingPage" [class]="model.bodyContainerCss">
             <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'left' } }"></ng-template>
-            <div [class]="model.bodyCss" [style.maxWidth]="model.renderedWidth" [id]="model.activePage ? model.activePage.id : ''">
-              <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }"></ng-template>
-              <!-- ko if: activePage -->
-                <ng-container *ngIf="model.activePage">
-                    <sv-ng-page [model]="model.activePage" [survey]="model"></sv-ng-page>
-                </ng-container>
-                <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->
-                <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->
+            <div class="sv-components-column sv-components-column--expandable">
+              <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'center' } }"></ng-template>
+              <div [class]="model.bodyCss" [style.maxWidth]="model.renderedWidth" [id]="model.activePage ? model.activePage.id : ''">
+                <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }"></ng-template>
+                <!-- ko if: activePage -->
+                  <ng-container *ngIf="model.activePage">
+                      <sv-ng-page [model]="model.activePage" [survey]="model"></sv-ng-page>
+                  </ng-container>
+                  <!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->
+                  <!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->
+                  <!-- /ko -->
+                  <!-- /ko -->
                 <!-- /ko -->
-                <!-- /ko -->
-              <!-- /ko -->
-              <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }"></ng-template>
+                <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }"></ng-template>
+              </div>
             </div>
             <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'right' } }"></ng-template>
           </div>

diff --git a/packages/survey-vue3-ui/src/Survey.vue b/packages/survey-vue3-ui/src/Survey.vue
@@ -32,29 +32,32 @@
                 :container="'left'"
                 :needRenderWrapper="true"
               ></component>
-              <div
-                :class="vueSurvey.bodyCss"
-                :style="{ maxWidth: vueSurvey.renderedWidth }"
-                :id="pageId"
-              >
-                <component
-                  :is="'sv-components-container'"
-                  :survey="vueSurvey"
-                  :container="'contentTop'"
-                  :needRenderWrapper="true"
-                ></component>
-                <survey-page
-                  :key="pageKey"
-                  :survey="vueSurvey"
-                  :page="vueSurvey.activePage"
-                  :css="css"
-                />
-                <component
-                  :is="'sv-components-container'"
-                  :survey="vueSurvey"
-                  :container="'contentBottom'"
-                  :needRenderWrapper="true"
-                ></component>
+              <div class="sv-components-column sv-components-column--expandable">
+                <component :is="'sv-components-container'" :survey="vueSurvey" :container="'center'"></component>
+                <div
+                  :class="vueSurvey.bodyCss"
+                  :style="{ maxWidth: vueSurvey.renderedWidth }"
+                  :id="pageId"
+                >
+                  <component
+                    :is="'sv-components-container'"
+                    :survey="vueSurvey"
+                    :container="'contentTop'"
+                    :needRenderWrapper="true"
+                  ></component>
+                  <survey-page
+                    :key="pageKey"
+                    :survey="vueSurvey"
+                    :page="vueSurvey.activePage"
+                    :css="css"
+                  />
+                  <component
+                    :is="'sv-components-container'"
+                    :survey="vueSurvey"
+                    :container="'contentBottom'"
+                    :needRenderWrapper="true"
+                  ></component>
+                </div>
               </div>
               <component
                 :is="'sv-components-container'"

diff --git a/src/react/reactSurvey.tsx b/src/react/reactSurvey.tsx
@@ -179,14 +179,17 @@ export class Survey extends SurveyElementBase<any, any>
     return (
       <div className={this.survey.bodyContainerCss}>
         <ComponentsContainer survey={this.survey} container={"left"}></ComponentsContainer>
-        <div
-          id={pageId}
-          className={className}
-          style={style}
-        >
-          <ComponentsContainer survey={this.survey} container={"contentTop"}></ComponentsContainer>
-          {activePage}
-          <ComponentsContainer survey={this.survey} container={"contentBottom"}></ComponentsContainer>
+        <div className="sv-components-column sv-components-column--expandable">
+          <ComponentsContainer survey={this.survey} container={"center"}></ComponentsContainer>
+          <div
+            id={pageId}
+            className={className}
+            style={style}
+          >
+            <ComponentsContainer survey={this.survey} container={"contentTop"}></ComponentsContainer>
+            {activePage}
+            <ComponentsContainer survey={this.survey} container={"contentBottom"}></ComponentsContainer>
+          </div>
         </div>
         <ComponentsContainer survey={this.survey} container={"right"}></ComponentsContainer>
       </div>

diff --git a/src/vue/survey.vue b/src/vue/survey.vue
@@ -14,15 +14,18 @@
           >
             <div :class="vueSurvey.bodyContainerCss">
               <component :is="'sv-components-container'" :survey="vueSurvey" :container="'left'"></component>
-              <div :class="vueSurvey.bodyCss"  :style="{maxWidth: survey.renderedWidth}" :id="pageId">
-                <component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentTop'"></component>
-                <survey-page
-                  :key="pageKey"
-                  :survey="vueSurvey"
-                  :page="vueSurvey.activePage"
-                  :css="css"
-                />
-                <component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentBottom'"></component>
+              <div class="sv-components-column sv-components-column--expandable">
+                <component :is="'sv-components-container'" :survey="vueSurvey" :container="'center'"></component>
+                <div :class="vueSurvey.bodyCss"  :style="{maxWidth: survey.renderedWidth}" :id="pageId">
+                  <component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentTop'"></component>
+                  <survey-page
+                    :key="pageKey"
+                    :survey="vueSurvey"
+                    :page="vueSurvey.activePage"
+                    :css="css"
+                  />
+                  <component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentBottom'"></component>
+                </div>
               </div>
               <component :is="'sv-components-container'" :survey="vueSurvey" :container="'right'"></component>
             </div>