Improved positioning of dropdowns and tooltips

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Alignment.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Alignment.js
index 0a29ef030d3c87e19b85fad59845c49d3cd56228..12ef5d1435b988abee219dacebc066075fc6dc94 100644 (file)
--- 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 04a835c4d228b8c988630c121a0a1456886660c4..7615f402e7ade054d4438a458421e897247a056e 100644 (file)
--- 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 7f13c7d6c143a2d716e0a2890af8e2c9c828bf62..e370c9c2b4b3de2a8950b4d83eb5e3a2b46d18ae 100644 (file)
--- 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 a63097353973777526a64473dd7be5bc860538a5..38add1a5d61ece027a11437c572ee29ebd3bd619 100644 (file)
--- 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;