diff --git a/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts b/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts index 77fab99ff3e..14358aa69d4 100644 --- a/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts +++ b/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts @@ -77,6 +77,19 @@ function onScroll() { }); } +/** + * Recalculates drop-down positions on page resize. + */ +function onWindowResize() { + _dropdowns.forEach((dropdown, containerId) => { + if (!dropdown.classList.contains("dropdownOpen")) { + return; + } + + UiDropdownSimple.setAlignment(dropdown, _menus.get(containerId)!); + }); +} + /** * Notifies callbacks on status change. */ @@ -379,6 +392,7 @@ const UiDropdownSimple = { DomChangeListener.add("WoltLabSuite/Core/Ui/Dropdown/Simple", () => UiDropdownSimple.initAll()); document.addEventListener("scroll", onScroll); + window.addEventListener("resize", () => onWindowResize(), { passive: true }); // expose on window object for backward compatibility window.bc_wcfSimpleDropdown = this; diff --git a/ts/WoltLabSuite/Core/Ui/Search.ts b/ts/WoltLabSuite/Core/Ui/Search.ts index 0c705bca0d8..92ecc093ea1 100644 --- a/ts/WoltLabSuite/Core/Ui/Search.ts +++ b/ts/WoltLabSuite/Core/Ui/Search.ts @@ -75,6 +75,20 @@ function initSearchBar(): void { _pageHeaderSearchMobile?.setAttribute("aria-expanded", "false"); }); + + window.addEventListener( + "resize", + () => { + if (_isMobile || !_pageHeader.classList.contains("searchBarOpen")) { + return; + } + + UiAlignment.set(_pageHeaderSearch, _topMenu, { + horizontal: "right", + }); + }, + { passive: true }, + ); } function initMobileSearch(): void { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js index 51dc008c730..6bf00cfc4ff 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js @@ -75,6 +75,17 @@ define(["require", "exports", "tslib", "../../CallbackList", "../../Core", "../. } }); } + /** + * Recalculates drop-down positions on page resize. + */ + function onWindowResize() { + _dropdowns.forEach((dropdown, containerId) => { + if (!dropdown.classList.contains("dropdownOpen")) { + return; + } + UiDropdownSimple.setAlignment(dropdown, _menus.get(containerId)); + }); + } /** * Notifies callbacks on status change. */ @@ -322,6 +333,7 @@ define(["require", "exports", "tslib", "../../CallbackList", "../../Core", "../. CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/Dropdown/Simple", () => UiDropdownSimple.closeAll()); Listener_1.default.add("WoltLabSuite/Core/Ui/Dropdown/Simple", () => UiDropdownSimple.initAll()); document.addEventListener("scroll", onScroll); + window.addEventListener("resize", () => onWindowResize(), { passive: true }); // expose on window object for backward compatibility window.bc_wcfSimpleDropdown = this; }, diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js index bd561ab55af..8e644b5c092 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js @@ -68,6 +68,14 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo closeSearch(); _pageHeaderSearchMobile === null || _pageHeaderSearchMobile === void 0 ? void 0 : _pageHeaderSearchMobile.setAttribute("aria-expanded", "false"); }); + window.addEventListener("resize", () => { + if (_isMobile || !_pageHeader.classList.contains("searchBarOpen")) { + return; + } + UiAlignment.set(_pageHeaderSearch, _topMenu, { + horizontal: "right", + }); + }, { passive: true }); } function initMobileSearch() { const searchButton = document.getElementById("pageHeaderSearchMobile");