Resolved #8356 - 'Freeze the progress bar' option or make it a defaul…

…t behavior
surveyjs · Jun 7, 2024 · 5adcfc0 · 5adcfc0
1 parent ec76b20
commit 5adcfc0
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 5 deletions.
diff --git a/packages/survey-angular-ui/src/components-container.component.html b/packages/survey-angular-ui/src/components-container.component.html
@@ -1,6 +1,6 @@
 <ng-template #template>
   <ng-container *ngIf="isNeedRenderWrapper">
-    <div *ngIf="components.length > 0" class="sv-components-column">
+    <div *ngIf="components.length > 0" [class]="'sv-components-column' + ' sv-components-container-' + container">
       <ng-container *ngFor="let component of components">
         <ng-template [component]="{ name: component.component, data: { survey: survey, container: container, model: component.data } }"></ng-template>
       </ng-container>

diff --git a/packages/survey-vue3-ui/src/components/Container.vue b/packages/survey-vue3-ui/src/components/Container.vue
@@ -1,6 +1,6 @@
 <template>
   <template v-if="components.length > 0">
-    <div class="sv-components-column" v-if="needRenderWrapper">
+    <div v-if="needRenderWrapper" :class="['sv-components-column', 'sv-components-container-' + container]">
       <template v-for="(component, index) in components">
         <component
           :is="component.component"

diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss
@@ -117,3 +117,15 @@ body {
 .sv-popup .sv-popup__scrolling-content {
   @include scrollRules;
 }
+
+@mixin stickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 15;
+  background-color: $background-dim;
+  box-shadow: $shadow-medium, $shadow-small;
+}
+
+.sv-components-container-center {
+  @include stickyHeader;
+}
diff --git a/src/knockout/components/components-container/components-container.ts b/src/knockout/components/components-container/components-container.ts
@@ -4,6 +4,7 @@ const template: string = require("./components-container.html");
 
 export class ComponentsContainer {
   constructor(public survey: SurveyModel, private container: any, public needRenderWrapper: boolean = true) {
+    this.css += " sv-components-container-" + container;
   }
   css = "sv-components-column";
   get components(): Array<any> {

diff --git a/src/react/components/components-container.tsx b/src/react/components/components-container.tsx
@@ -16,7 +16,7 @@ export class ComponentsContainer extends React.Component<any, any> {
         })}
       </>;
     }
-    return <div className="sv-components-column">
+    return <div className={"sv-components-column" + " sv-components-container-" + this.props.container}>
       {components.map(component => {
         return ReactElementFactory.Instance.createElement(component.component as string, { survey: this.props.survey, model: component.data, container: this.props.container, key: component.id });
       })}

diff --git a/src/vue/components/container.vue b/src/vue/components/container.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="components.length > 0" class="sv-components-column">
+  <div v-if="components.length > 0" :class="['sv-components-column', 'sv-components-container-' + container]">
     <template v-for="component in components">
       <component
         :is="component.component"

diff --git a/tests/markup/snapshots/survey-navigation.snap.html b/tests/markup/snapshots/survey-navigation.snap.html
@@ -18,7 +18,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="sv-components-column">
+				<div class="sv-components-column sv-components-container-contentBottom">
 					<div class="sv_nav sv-action-bar sv-action-bar--default-size-mode">
 						<div class="sv-action" id="custom-action">
 							<div class="sv-action__content">