[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH][UX] SmartMenus: Enable scrolling for long dropdowns to ensure all submenus are visible

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
ed888461 by Yves Ngalamulume at 2025-10-16T17:49:20+00:00
[ENH][UX] SmartMenus: Enable scrolling for long dropdowns to ensure all submenus are visible
---
* [FIX] Apply dropdown positioning only on SmartMenus items

* [ENH][UI] Improve dropdown menu positioning and scrolling behavior for better visibility

* [ENH][UX] Enable scrolling for long dropdowns to ensure all submenus are visible

See merge request tikiwiki/tiki!8600

- - - - -


2 changed files:

- src/js/jquery-tiki/tiki-menu.js
- themes/base_files/css/tiki_base.scss


Changes:

=====================================
src/js/jquery-tiki/tiki-menu.js
=====================================
@@ -26,5 +26,25 @@ $(function () {
             }
         }
     });
+
+    $(".sm-nav-item").on("click", function () {
+        const $menu = $(this).find(".dropdown-menu, ul").first();
+        if ($menu.length === 0) return;
+
+        const rect = this.getBoundingClientRect();
+
+        // Determine vertical and horizontal position
+        const vertical = rect.top < window.innerHeight / 2 ? "top" : "bottom";
+        const horizontal = rect.left < window.innerWidth / 2 ? "end" : "start";
+
+        // Remove existing position classes
+        $menu.removeClass("dropdown-menu-top dropdown-menu-bottom dropdown-menu-end dropdown-menu-start");
+
+        if (vertical && horizontal) {
+            // Add new position classes
+            $menu.addClass(`dropdown-menu-${vertical} dropdown-menu-${horizontal}`);
+        }
+    });
 });
+
 // end of src/js/tiki-menu.js


=====================================
themes/base_files/css/tiki_base.scss
=====================================
@@ -109,6 +109,20 @@ li.highlight {
     bottom: 100% !important;
     margin-bottom: .5rem;
     margin-top: 0 !important;
+    max-height: 65vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.dropdown-menu-top,
+.dropdown-menu-end,
+.dropdown-menu-start {
+  top: 100%;
+  bottom: auto;
+  max-height: 40vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 3000;
 }
 
 /* End of file */



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

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/ed888461879920d973cea8c7f7d894b394d83a6e
You're receiving this email because of your account on gitlab.com.

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