Resolved #6738 - No space appears for a Progress Bar and the last que…

…stion on a page
surveyjs · Sep 5, 2023 · 2bc2b7a · 2bc2b7a
1 parent 5d9c81e
commit 2bc2b7a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
@@ -93,16 +93,6 @@
   gap: calcSize(2);
 }
 
-.sd-body__progress {
-  margin-bottom: calcSize(4);
-}
-
-.sd-body__progress--top {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-}
-
 .sd-body--empty {
   min-height: 400px;
   text-align: center;
@@ -158,6 +148,7 @@
     &:hover {
       background-color: $background-dark;
     }
+
     &:focus {
       box-shadow: 0 0 0 2px $primary;
     }

diff --git a/src/defaultV2-theme/blocks/sd-progress.scss b/src/defaultV2-theme/blocks/sd-progress.scss
@@ -27,4 +27,15 @@
   @media only screen and (max-width: calcSize(125)) {
     margin-left: 10px;
   }
+}
+
+.sd-body__progress--top {
+  margin-bottom: calcSize(4);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.sd-body__progress--bottom .sd-progress__text {
+  margin-top: calcSize(-3);
 }
diff --git a/src/knockout/components/components-container/components-container.html b/src/knockout/components/components-container/components-container.html
@@ -3,7 +3,7 @@
 <div data-bind="css: css">
   <!-- ko foreach: components -->
   <!-- ko if: $data.component && !$data.template -->
-  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data } } -->
+  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data, container: $parent.container } } -->
   <!-- /ko -->
   <!-- /ko -->
   <!-- ko if: $data.template -->
@@ -16,7 +16,7 @@
 <!-- ko ifnot: $data.needRenderWrapper -->
   <!-- ko foreach: components -->
   <!-- ko if: $data.component && !$data.template -->
-  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data } } -->
+  <!-- ko component: { name: component, params: { survey: $parent.survey, model: $data.data, container: $parent.container } } -->
   <!-- /ko -->
   <!-- /ko -->
   <!-- ko if: $data.template -->

diff --git a/src/knockout/components/progress/progress.html b/src/knockout/components/progress/progress.html
@@ -1,4 +1,4 @@
-<div data-bind="css: model.getProgressCssClasses()">
+<div data-bind="css: getProgressCssClasses()">
     <div data-bind="css: model.css.progressBar, style: { width: model.progressValue + '%' }"
         role="progressbar" aria-valuemin="0" aria-valuemax="100">
         <span data-bind="text: model.progressText, css: getProgressTextInBarCss(model.css)"></span>

diff --git a/src/knockout/components/progress/progress.ts b/src/knockout/components/progress/progress.ts
@@ -3,20 +3,23 @@ import { SurveyProgressModel } from "survey-core";
 const template = require("html-loader?interpolate!val-loader!./progress.html");
 
 export class ProgressViewModel {
-  constructor(public model: any) {}
+  constructor(public model: any, private container: string = "header") { }
 
   getProgressTextInBarCss(css: any): string {
     return SurveyProgressModel.getProgressTextInBarCss(css);
   }
   getProgressTextUnderBarCss(css: any): string {
     return SurveyProgressModel.getProgressTextUnderBarCss(css);
   }
+  getProgressCssClasses() {
+    return this.model.getProgressCssClasses(this.container);
+  }
 }
 
 ko.components.register("sv-progress-progress", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: template
@@ -26,31 +29,31 @@ const templateBridge = "<!-- ko component: { name: 'sv-progress-progress', param
 ko.components.register("sv-progress-pages", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
 });
 ko.components.register("sv-progress-questions", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
 });
 ko.components.register("sv-progress-correctquestions", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge
 });
 ko.components.register("sv-progress-requiredquestions", {
   viewModel: {
     createViewModel: (params: any) => {
-      return new ProgressViewModel(params.model);
+      return new ProgressViewModel(params.model, params.container);
     }
   },
   template: templateBridge