From 02b87f5e89930e0e48ee32aeeae3050112cdf03b Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Tue, 23 Jan 2024 15:19:41 +0000 Subject: [PATCH] [FIX] website: fix full height snippet option when a modal is open Steps to reproduce the bug: - In Website edit mode. - Drag and drop a "Cover" snippet into an empty page. - Sets the "Height" option of this snippet to "100%". - Drag and drop a "Media List" snippet into the page. - Drag and drop a "Popup" snippet into the page. - Save the page. - Scroll quickly the page to the bottom before the popup appears. - When the popup is open, resize the window to trigger a "resize" event. - Close the popup. - Scroll the page to the top. - Bug: the height of the "Cover" snippet is a way too high. This bug occurred because the height of the snippet with the "Height: 100%" option enabled is calculated based on the scrollable element it is in (since this commit [1]). However, when a popup is opened, the detected scrollable element was incorrect due to the "overflow: hidden" rule added to "#wrapwrap" by the "modal-open" class on the . [1]: https://github.com/odoo/odoo/commit/b371cb42cb67115692464c102813b7ebd54785d9 opw-3643498 closes odoo/odoo#152402 X-original-commit: 35b3f676820f7a19e842b3403a5ebcf956714a70 Signed-off-by: Quentin Smetz (qsm) Signed-off-by: Benjamin Vray (bvr) --- .../website/static/src/js/content/snippets.animation.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js index e7b9fe37eed..a19e57b9f82 100644 --- a/addons/website/static/src/js/content/snippets.animation.js +++ b/addons/website/static/src/js/content/snippets.animation.js @@ -1142,7 +1142,16 @@ registry.FullScreenHeight = publicWidget.Widget.extend({ // Doing it that way allows to considerer fixed headers, hidden headers, // connected users, ... const firstContentEl = $('#wrapwrap > main > :first-child')[0]; // first child to consider the padding-top of main + // When a modal is open, we remove the "modal-open" class from the body. + // This is because this class sets "#wrapwrap" and "" to + // "overflow: hidden," preventing the "closestScrollable" function from + // correctly recognizing the scrollable element closest to the element + // for which the height needs to be calculated. Without this, the + // "mainTopPos" variable would be incorrect. + const modalOpen = document.body.classList.contains("modal-open"); + document.body.classList.remove("modal-open"); const mainTopPos = firstContentEl.getBoundingClientRect().top + $(firstContentEl.parentNode).closestScrollable()[0].scrollTop; + document.body.classList.toggle("modal-open", modalOpen); return (windowHeight - mainTopPos); }, });