Fixed #8525 - Page progress indicators - White boxes appear behind page navigation buttons when using a custom theme with a background image

src/defaultV2-theme/blocks/sd-progress-buttons.scss

@@ -57,8 +57,8 @@
       position: absolute;
       bottom: calcSize(1.125);
       // right: 50%;
-      right: calc(50% + 4px);
-      width: calc(100% - 4px);
+      right: calc(50% + 10px);
+      width: calc(100% - 20px);
       pointer-events: none;
     }
 
@@ -85,7 +85,7 @@
         height: calcSize(2);
         top: calcSize(-0.5);
         left: calcSize(-1.25);
-        background-color: $background-dim;
+        // background-color: $background-dim;
         z-index: -2;
         // border: calcSize(0.5) solid $background-dim;
         // border-radius: 50%;
@@ -241,8 +241,8 @@
     li {
       &:not(:first-child)>.sd-progress-buttons__connector {
         bottom: calcSize(2.175);
-        right: calc(50% + 8px);
-        width: calc(100% - 8px);
+        right: calc(50% + 18px);
+        width: calc(100% - 36px);
       }
 
       .sd-progress-buttons__button {
@@ -312,7 +312,7 @@
     li {
       &:not(:first-child)>.sd-progress-buttons__connector {
         right: unset;
-        left: calc(50% + 4px);
+        left: calc(50% + 10px);
       }
     }
   }
@@ -322,7 +322,7 @@
       li {
         &:not(:first-child)>.sd-progress-buttons__connector {
           right: unset;
-          left: calc(50% + 8px);
+          left: calc(50% + 20px);
         }
       }
     }

src/progress-buttons.ts

@@ -82,9 +82,10 @@ export class ProgressButtons extends Base {
     const listContainerElement = element.querySelector("ul");
     if (!listContainerElement) return;
     const listContainerElements = element.querySelectorAll(".sd-progress-buttons__connector");
-    const circleWidth = this.showItemNumbers ? 17 : 5;
-    const sideCorrection = this.survey.isMobile ? 0 : listContainerElement.children[0].clientWidth;
-    const connectorWidth = (listContainerElement.clientWidth - sideCorrection) / (listContainerElement.children.length - 1) - circleWidth;
+    const circleWidth = this.showItemNumbers ? 36 : 20;
+    // const sideCorrection = this.survey.isMobile ? circleWidth : listContainerElement.children[0].clientWidth;
+    // const connectorWidth = (listContainerElement.clientWidth - sideCorrection) / (listContainerElement.children.length - 1) - circleWidth;
+    const connectorWidth = (listContainerElement.clientWidth - circleWidth) / (listContainerElement.children.length - 1) - circleWidth;
     for (let i = 0; i < listContainerElements.length; i++) {
       (listContainerElements[i] as HTMLDivElement).style.width = connectorWidth + "px";
     }
@@ -155,6 +156,7 @@ export class ProgressButtonsResponsivityManager {
   }
   private processResponsiveness = (model: ProgressButtons, options: { width: number }) => {
     this.viewModel.onUpdateScroller(model.isListContainerHasScroller(this.element));
+    this.model.clearConnectorsWidth(this.element);
     if (!model.showItemTitles) {
       this.model.adjustConnectors(this.element);
       return;
@@ -166,7 +168,6 @@ export class ProgressButtonsResponsivityManager {
       this.viewModel.onResize(this.canShowItemTitles);
       return;
     }
-    this.model.clearConnectorsWidth(this.element);
     if (this.timer !== undefined) {
       clearTimeout(this.timer);
     }