From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 26 Aug 2021 14:06:18 +0000 (+0200)
Subject: Incorrect alignment of positioned elements when they are hidden
X-Git-Tag: 5.4.5_RC_1~6
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0dd41832439d96ac42b8d425932aa074a4bfc840;p=GitHub%2FWoltLab%2FWCF.git

Incorrect alignment of positioned elements when they are hidden

The calculation did not consider the `display` attribute, causing the elements dimensions to be considered as `0x0` for the purpose of the calculation.

See https://community.woltlab.com/thread/291896-beitragsoptionen-verschoben/
---

diff --git a/ts/WoltLabSuite/Core/Ui/Alignment.ts b/ts/WoltLabSuite/Core/Ui/Alignment.ts
index 864f025799..9b0ee7cd7a 100644
--- a/ts/WoltLabSuite/Core/Ui/Alignment.ts
+++ b/ts/WoltLabSuite/Core/Ui/Alignment.ts
@@ -176,6 +176,13 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options
     options.allowFlip = "both";
   }
 
+  let savedDisplayValue: string | undefined = undefined;
+  if (window.getComputedStyle(element).display === "none") {
+    savedDisplayValue = element.style.getPropertyValue("display");
+
+    element.style.setProperty("display", "block");
+  }
+
   // Place the element in the upper left corner to prevent calculation issues due to possible scrollbars.
   DomUtil.setStyles(element, {
     bottom: "auto !important",
@@ -295,6 +302,14 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options
 
   DomUtil.show(element);
   element.style.removeProperty("visibility");
+
+  if (savedDisplayValue !== undefined) {
+    if (savedDisplayValue === "") {
+      element.style.removeProperty("display");
+    } else {
+      element.style.setProperty("display", savedDisplayValue);
+    }
+  }
 }
 
 export type AllowFlip = "both" | "horizontal" | "none" | "vertical";
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js
index 0ebaf3e897..b5e60e5483 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js
@@ -122,6 +122,11 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti
         if (["both", "horizontal", "vertical", "none"].indexOf(options.allowFlip) === -1) {
             options.allowFlip = "both";
         }
+        let savedDisplayValue = undefined;
+        if (window.getComputedStyle(element).display === "none") {
+            savedDisplayValue = element.style.getPropertyValue("display");
+            element.style.setProperty("display", "block");
+        }
         // Place the element in the upper left corner to prevent calculation issues due to possible scrollbars.
         Util_1.default.setStyles(element, {
             bottom: "auto !important",
@@ -214,6 +219,14 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti
         });
         Util_1.default.show(element);
         element.style.removeProperty("visibility");
+        if (savedDisplayValue !== undefined) {
+            if (savedDisplayValue === "") {
+                element.style.removeProperty("display");
+            }
+            else {
+                element.style.setProperty("display", savedDisplayValue);
+            }
+        }
     }
     exports.set = set;
 });