[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX] Dropdowns: prevent dropdown menus from overflowing off-screen on mobile devices

Adrien Mbuya Maloba pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
50a0ec26 by Moïse Nturubika at 2026-06-25T16:13:46+03:00
[FIX] Dropdowns: prevent dropdown menus from overflowing off-screen on mobile devices
---
* [FIX] Modules: Use margin shift instead of fixed position to prevent dropdown detachment

* [FIX] Modules: Prevent dropdown menus from overflowing off-screen on mobile devices

* [FIX] mod-switch_color_mode: Dynamic alignment for dropdown to avoid screen overflow

* fix(translation): wrap theme toggle aria-label in translation block

* [FIX] mod-switch_color_mode: Fix dropdown alignment using dynamic positioning

* [FIX] mod-switch_color_mode: Use responsive alignment for dropdown to avoid overflow on small screens

See merge request tikiwiki/tiki!10234

- - - - -


2 changed files:

- lib/jquery_tiki/tiki-jquery.js
- templates/modules/mod-switch_color_mode.tpl


Changes:

=====================================
lib/jquery_tiki/tiki-jquery.js
=====================================
@@ -826,6 +826,57 @@ $(function() { // JQuery's DOM is ready event - before onload
             }
         }, 100);
     });
+
+    // Prevent dropdown menus from overflowing the viewport.
+    document.addEventListener('shown.bs.dropdown', function (e) {
+        var toggle = e.target;
+        if (!toggle || !toggle.classList.contains('dropdown-toggle')) return;
+
+        var parent = toggle.parentElement;
+        var menu = parent ? parent.querySelector('.dropdown-menu') : null;
+        if (!menu) return;
+
+        var menuRect = menu.getBoundingClientRect();
+        var viewportWidth = document.documentElement.clientWidth;
+
+        var overflowRight = menuRect.right - viewportWidth;
+        var overflowLeft  = -menuRect.left;
+
+        if (overflowRight <= 0 && overflowLeft <= 0) return;
+
+        var menuWidth = menuRect.width;
+        var deltaX = 0;
+
+        // Save original styles to restore on close
+        menu._origMarginLeft = menu.style.marginLeft || '';
+        menu._origMaxWidth   = menu.style.maxWidth || '';
+
+        if (menuWidth >= viewportWidth - 8) {
+            // Menu is wider than the viewport. Align left edge to 4px and constrain width.
+            deltaX = -(menuRect.left - 4);
+            menu.style.setProperty('max-width', (viewportWidth - 8) + 'px', 'important');
+        } else if (overflowRight > 0) {
+            deltaX = -(overflowRight + 4);
+        } else if (overflowLeft > 0) {
+            deltaX = overflowLeft + 4;
+        }
+
+        if (deltaX !== 0) {
+            // Apply a horizontal shift using margin-left.
+            // This is safer than position:fixed, which breaks in scrolled/transformed ancestors.
+            menu.style.setProperty('margin-left', deltaX + 'px', 'important');
+        }
+
+        // Restore original styles when dropdown closes
+        function cleanup() {
+            menu.style.marginLeft = menu._origMarginLeft;
+            menu.style.maxWidth   = menu._origMaxWidth;
+            delete menu._origMarginLeft;
+            delete menu._origMaxWidth;
+            toggle.removeEventListener('hidden.bs.dropdown', cleanup);
+        }
+        toggle.addEventListener('hidden.bs.dropdown', cleanup);
+    }, true);
 });        // end $document.ready
 
 //For ajax/custom search


=====================================
templates/modules/mod-switch_color_mode.tpl
=====================================
@@ -21,10 +21,10 @@
 {else}
     <div class="color-mode-navbar">
         <div class="dropdown">
-            <button class="btn btn-link dropdown-toggle py-2 px-0 px-lg-2 d-flex align-items-center loading" id="color-mode-theme" data-bs-toggle="dropdown" type="button" aria-expanded="false" data-bs-display="static" aria-label="Toggle theme (auto)">
+            <button class="btn btn-link dropdown-toggle py-2 px-0 px-lg-2 d-flex align-items-center loading" id="color-mode-theme" data-bs-toggle="dropdown" type="button" aria-expanded="false" data-bs-display="static" aria-label="{tr}Toggle theme (auto){/tr}">
                 {icon name=$default_icon}
             </button>
-            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="color-mode-theme" data-bs-popper="static">
+            <ul class="dropdown-menu" aria-labelledby="color-mode-theme">
                 {foreach $default_mode item=mode}
                     <li>
                         <button type="button" class="dropdown-item d-flex align-items-center gap-1" data-bs-theme-value="{$mode['name']}" aria-pressed="false">



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/50a0ec267319f6515a7b90ac587193f964c595f1

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/50a0ec267319f6515a7b90ac587193f964c595f1
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs