#8298 Invalid progress bar layout with default v2 theme within a Boot…

…strap 5 based project (#8350) * #8298 Invalid progress bar layout with default v2 theme within a Bootstrap 5 based project Fixes #8298 * #8298 - update screenshots
surveyjs · Jun 3, 2024 · 4b5f8c1 · 4b5f8c1
1 parent 7926f5e
commit 4b5f8c1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-progress-buttons.scss b/src/defaultV2-theme/blocks/sd-progress-buttons.scss
@@ -101,6 +101,7 @@
         z-index: -1;
         border: calcSize(0.5) solid transparent;
         border-radius: 50%;
+        box-sizing: content-box;
       }
     }
   }

diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bootstrap.png b/visualRegressionTests/tests/defaultV2/etalons/survey-progress-bar-bootstrap.png
diff --git a/visualRegressionTests/tests/defaultV2/progress.ts b/visualRegressionTests/tests/defaultV2/progress.ts
@@ -359,4 +359,19 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-progress-bar-top-rtl.png", Selector(".sd-container-modern"), t, comparer); // title + progress
     });
   });
+
+  test("Check survey with progress and bootstrap", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await ClientFunction(() => {
+        document.head.insertAdjacentHTML("beforeend", "<style>* { box-sizing: border-box; }</style>");
+      })();
+      await t.resizeWindow(800, 1080);
+      await initSurvey(framework, json);
+      await ClientFunction(() => {
+        (<any>window).survey.progressBarType = "pages";
+        (<any>window).survey.currentPageNo = 1;
+      })();
+      await takeElementScreenshot("survey-progress-bar-bootstrap.png", Selector(".sd-progress-buttons__list"), t, comparer); // title + progress
+    });
+  });
 });