[TikiWiki-commits] [Git][tikiwiki/tiki][29.x] [BP][FIX] Fix menu preview submenu toggle not expanding

luci pushed to branch 29.x at Tiki Wiki CMS Groupware / Tiki


Commits:
99746580 by Moïse Nturubika at 2026-02-18T20:01:25+00:00
[BP][FIX] Fix menu preview submenu toggle not expanding
---
* [FIX] Remove unnecessary !important declarations from submenu styles

* [REF] Remove the scss duplication in preview.tpl

* [FIX] proper CSS spacing and bootstrap var for menu separator

* [FIX] Fix menu preview submenu toggle not expanding

See merge request tikiwiki/tiki!9603

- - - - -


4 changed files:

- src/js/jquery-tiki/tiki-menu.js
- templates/bootstrap_smartmenu.tpl
- templates/bootstrap_smartmenu_children.tpl
- themes/base_files/scss/_tiki-menus.scss


Changes:

=====================================
src/js/jquery-tiki/tiki-menu.js
=====================================
@@ -27,13 +27,20 @@ $(function () {
             $menu.addClass("dropdown-menu-top-t");
         }
     });
-    if ($dropdown.length > 0) {
-        if (position !== "bottom") {
-            $dropdown.removeClass("dropdown-menu-bottom");
-        } else {
-            $dropdown.addClass("dropdown-menu-bottom");
-        }
-    }
+
+    // Position submenu dropdowns appropriately when expanded
+    $(document).on("shown.bs.collapse", ".sm-sub", function () {
+        const $menu = $(this);
+        const $toggler = $menu.prev(".sm-sub-toggler");
+        if ($toggler.length === 0) return;
+
+        const rect = $toggler[0].getBoundingClientRect();
+        const vertical = rect.top < window.innerHeight / 2 ? "top-t" : "bottom-b";
+        const horizontal = rect.left < window.innerWidth / 2 ? "end-l" : "start-r";
+
+        $menu.removeClass("dropdown-menu-top-t dropdown-menu-bottom-b dropdown-menu-end-l dropdown-menu-start-r");
+        $menu.addClass(`dropdown-menu-${vertical} dropdown-menu-${horizontal}`);
+    });
 });
 
 /* Mobile dropdown positioning */


=====================================
templates/bootstrap_smartmenu.tpl
=====================================
@@ -1,10 +1,10 @@
 {if not empty($item.children)}
     <li class="sm-nav-item nav-item{if $item.selected|default:null} active{/if} {$item.class|escape} {if $module_params.megamenu eq 'y' and $module_params.megamenu_static eq 'y' }static{/if}">
-        <a href="{$item.sefurl|escape}" class="sm-nav-link nav-link sm-sub-toggler">
+        <a href="#sm_menu_{$item.optionId|escape}" class="sm-nav-link nav-link sm-sub-toggler" data-bs-toggle="collapse" aria-expanded="false">
             {if $menu_info.use_items_icons eq "y" && $item.icon}
                 <span class="me-2">{icon name=$item.icon}</span>
             {/if}
-            <span class="mwnu-item-label me-auto">{tr}{$item.name}{/tr}</span>
+            <span class="mwnu-item-label me-auto">{tr}{$item.name}{/tr}</span>&nbsp;<small>{icon name="caret-down"}</small>
         </a>
         {if $item.sectionLevel eq 0 and $module_params.megamenu eq 'y'}
             <ul class="sm-sub sm-sub--mega">
@@ -23,7 +23,7 @@
                 </li>
             </ul>
         {else}
-            <ul class="sm-sub dropdown-menu">
+            <ul id="sm_menu_{$item.optionId|escape}" class="sm-sub dropdown-menu collapse">
                 {foreach from=$item.children item=sub}
                     {include file='bootstrap_smartmenu_children.tpl' item=$sub sub=true}
                 {/foreach}


=====================================
templates/bootstrap_smartmenu_children.tpl
=====================================
@@ -1,12 +1,12 @@
 {if not empty($item.children)}
     <li class="sm-sub-item {if $item.selected|default:null} active{/if} {$item.class|escape}">
-        <a href="{$item.sefurl|escape}" class="sm-sub-link dropdown-item sm-sub-toggler" data-bs-toggle="dropdown">
+        <a href="#sm_submenu_{$item.optionId|escape}" class="sm-sub-link dropdown-item sm-sub-toggler" data-bs-toggle="collapse" aria-expanded="false">
             {if $menu_info.use_items_icons eq "y" && $item.icon}
                 <span class="me-2">{icon name=$item.icon}</span>
             {/if}
-            <span class="mwnu-item-label me-auto">{tr}{$item.name}{/tr}</span>
+            <span class="mwnu-item-label me-auto">{tr}{$item.name}{/tr}</span>&nbsp;<small>{icon name="caret-down"}</small>
         </a>
-        <ul class="sm-sub dropdown-menu">
+        <ul id="sm_submenu_{$item.optionId|escape}" class="sm-sub dropdown-menu collapse">
             {* {if $sub}
                 <li class="dropdown-header">{tr}{$item.name}{/tr}</li>
                 <li class="dropdown-divider"></li>


=====================================
themes/base_files/scss/_tiki-menus.scss
=====================================
@@ -3,9 +3,11 @@
     display: block;
     /* flex-grow: 1; */
 }
+
 // Vertical menus shouldn't have the navbar backgrounds
 .col2,
 .col3 {
+
     .navbar-light.bg-light,
     .navbar-dark.bg-dark {
         background: none !important;
@@ -49,10 +51,13 @@
 }
 
 // Override inline negative margin-left from Smartmenus JavaScript
-.tiki /*.mega-menu-static .navbar-nav:not(.sm-vertical) */ .navbar-nav .dropdown-menu.mega-menu {
-//    margin-left: 0 !important;
+.tiki
+
+/*.mega-menu-static .navbar-nav:not(.sm-vertical) */
+.navbar-nav .dropdown-menu.mega-menu {
+    //    margin-left: 0 !important;
     position: absolute;
-//    width: 98vw !important;
+    //    width: 98vw !important;
     left: 0 !important;
     margin-left: 0 !important;
 }
@@ -107,8 +112,9 @@
 }
 
 .mega-menu a:hover,
-.mega-menu--item-container .mega-menu--item-level-1 > li > a:hover { // uncommented and scope increased by Gary
-  text-decoration: none;
+.mega-menu--item-container .mega-menu--item-level-1 > li > a:hover {
+    // uncommented and scope increased by Gary
+    text-decoration: none;
 }
 
 .mega-menu ul {
@@ -155,8 +161,71 @@
 }
 
 @media (max-width: 768px) {
-    .modules.top_modules > .box-menu {
+    .modules.top_modules>.box-menu {
         order: 999;
         width: 100%;
     }
 }
+
+/* --- Force all dropdowns to open upwards ---*/
+.dropdown-menu-bottom {
+    top: auto !important;
+    bottom: 100% !important;
+    margin-bottom: .5rem;
+    margin-top: 0 !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.dropdown-menu-top-t,
+.dropdown-menu-end-l,
+.dropdown-menu-start-r {
+    top: 100%;
+    bottom: auto;
+    max-height: 40vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: 2000 !important;
+}
+
+.dropdown-menu-bottom-b {
+    max-height: 65vh;
+    z-index: 3000;
+}
+
+/* Menu separator styling */
+.menu-separator {
+    height: 0;
+    margin: var(--bs-dropdown-divider-margin-y) 0;
+    overflow: hidden;
+    border-top: 1px solid var(--bs-dropdown-divider-bg);
+    opacity: 1;
+}
+
+.form-control .menu-separator {
+    margin: 0;
+}
+
+.sm-sub-toggler[data-bs-toggle="collapse"]::after {
+    display: none;
+}
+
+.sm-sub.collapse.dropdown-menu,
+.sm-sub.collapsing.dropdown-menu {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    position: static;
+    padding-left: 1.5rem;
+}
+
+.sm-sub.collapse .dropdown-item,
+.sm-sub.collapse .sm-sub-link {
+    background: transparent;
+    border: none;
+    padding: 0.5rem 1rem;
+}
+
+.sm-sub.collapse.show {
+    display: block;
+}
\ No newline at end of file



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

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/99746580d4b460b110ccea54553f75b1c74a8097
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