From 7bf60838308d904aad5211fffce794c1a4eca3db Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Fri, 15 Jul 2022 08:49:27 +0000 Subject: [PATCH] [FIX] website: position step connectors relative to columns Since [1] when Bootstrap 5 was introduced, the position of the connectors between steps of the "Steps" block is wrongly computed. The left offset of the connectors between steps is computed as 50% of the column width + half the size of the content it connects to. In Bootstrap 4 the columns are positioned as relative. In Bootstrap 5 the columns are positioned as static. Because of this "50% of the column width" became "50% of the row width" in Bootstrap 5. This commit makes the specific columns of this snippet positioned as relative so that the offset calculation get back to its former result. Steps to reproduce: - Drop a "Steps" block. => Connectors are wrongly positioned, even spanning outside the page. [1]: https://github.com/odoo/odoo/commit/971e5a91aab96d36129a823e03f1f9f1b1293968 task-2729177 closes odoo/odoo#96071 Signed-off-by: Quentin Smetz (qsm) --- addons/website/static/src/snippets/s_process_steps/000.scss | 1 + addons/website/static/src/snippets/s_process_steps/001.scss | 2 ++ 2 files changed, 3 insertions(+) diff --git a/addons/website/static/src/snippets/s_process_steps/000.scss b/addons/website/static/src/snippets/s_process_steps/000.scss index f0c76136f1c..cb01e07c971 100644 --- a/addons/website/static/src/snippets/s_process_steps/000.scss +++ b/addons/website/static/src/snippets/s_process_steps/000.scss @@ -15,6 +15,7 @@ @include media-breakpoint-up(lg) { overflow-x: hidden; .s_process_step { + position: relative; .s_process_step_icon { position: relative; z-index: 1; diff --git a/addons/website/static/src/snippets/s_process_steps/001.scss b/addons/website/static/src/snippets/s_process_steps/001.scss index 7e891cc397b..1b8ab3f5fe6 100644 --- a/addons/website/static/src/snippets/s_process_steps/001.scss +++ b/addons/website/static/src/snippets/s_process_steps/001.scss @@ -2,6 +2,8 @@ $process-step-icon-size: 5rem; .s_process_step { + position: relative; + .s_process_step_icon { position: relative; margin: $grid-gutter-width 0;