From d421c18b181bfa0084a349bb23ee79a93b07eae9 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 24 Jan 2016 17:27:34 +0100
Subject: [PATCH] Improved positioning of dropdowns and tooltips

---
 .../install/files/js/WoltLab/WCF/Ui/Alignment.js  |  6 +++++-
 .../files/js/WoltLab/WCF/Ui/Dropdown/Simple.js    |  2 +-
 wcfsetup/install/files/style/ui/dropdown.scss     | 15 +++++++++++++++
 .../files/style/ui/dropdownInteractive.scss       |  5 +++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Alignment.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Alignment.js
index 0a29ef030d..12ef5d1435 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Alignment.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Alignment.js
@@ -55,7 +55,8 @@ define(['Core', 'Language', 'Dom/Traverse', 'Dom/Util'], function(Core, Language
 				bottom: 'auto !important',
 				left: '0 !important',
 				right: 'auto !important',
-				top: '0 !important'
+				top: '0 !important',
+				visibility: 'hidden !important'
 			});
 			
 			var elDimensions = DomUtil.outerDimensions(el);
@@ -157,6 +158,9 @@ define(['Core', 'Language', 'Dom/Traverse', 'Dom/Util'], function(Core, Language
 				right: right + (right !== 'auto' ? 'px' : ''),
 				top: top + (top !== 'auto' ? 'px' : '')
 			});
+			
+			el.style.removeProperty('display');
+			el.style.removeProperty('visibility');
 		},
 		
 		/**
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
index 04a835c4d2..7615f402e7 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Dropdown/Simple.js
@@ -31,7 +31,7 @@ define(
 			_didInit = true;
 			
 			_menuContainer = elCreate('div');
-			elAttr(_menuContainer, 'id', 'dropdownMenuContainer');
+			_menuContainer.className = 'dropdownMenuContainer';
 			document.body.appendChild(_menuContainer);
 			
 			_availableDropdowns = elByClass('dropdownToggle');
diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss
index 7f13c7d6c1..e370c9c2b4 100644
--- a/wcfsetup/install/files/style/ui/dropdown.scss
+++ b/wcfsetup/install/files/style/ui/dropdown.scss
@@ -1,3 +1,18 @@
+/* container for both regular and interactive dropdowns */
+.dropdownMenuContainer {
+	/* force positioning in the upper left corner to prevent elements from
+	   jumping during calculation */
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+	
+	> .dropdown {
+		/* hide dropdown during calculation */
+		left: -200%;
+	}
+}
+
 .dropdown {
 	.dropdownToggle:active,
 	&.dropdownOpen .dropdownToggle {
diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index a630973539..38add1a5d6 100644
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -1,3 +1,8 @@
+.dropdownMenuContainer > .interactiveDropdown {
+	/* hide dropdown during calculation */
+	left: -200%;
+}
+
 /* styling for interactive dropdowns (currently only used in the user panel) */
 .interactiveDropdown {
 	background-color: $wcfContentBackground;
-- 
2.20.1