[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][ENH][UX] Classic Bootstrap layout (fixed-top navbar): Adjust top margin...

Alvin Bauma pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
0b4e964c by Alvin Bauma at 2025-08-28T16:02:10+02:00
[FIX][ENH][UX] Classic Bootstrap layout (fixed-top navbar):  Adjust top margin of middle_outer dynamically based on header height values
---
* [FIX][UX] Classic Bootstrap layout (fixed-top navbar)
:  Adjust top margin of middle_outer dynamically based on header height values

See merge request tikiwiki/tiki!8397

- - - - -


1 changed file:

- templates/layouts/social/layout_view.tpl


Changes:

=====================================
templates/layouts/social/layout_view.tpl
=====================================
@@ -41,7 +41,11 @@
         display: block;
         height: {/literal}{$prefs.theme_navbar_fixed_topbar_offset}{literal}px; /* fixed header height*/
         margin: -{/literal}{$prefs.theme_navbar_fixed_topbar_offset}{literal}px 0 0; /* negative fixed header height */
-    }{/literal}
+    }
+    #middle_outer {
+        margin-top: {/literal}{$prefs.theme_navbar_fixed_topbar_offset}{literal}px;
+    }
+    {/literal}
     </style>{/if}
 </head>
 <body{html_body_attributes class="navbar-padding"}>
@@ -241,6 +245,32 @@
             </div>
         </footer>
     {/if}
+    
+    {* Manage top margin of middle_outer dynamically in case header height changes due to content changes (ex. Module added on Top position) or responsive design *}
+    {jq}
+        (function ($) {
+            var $header = $('header.tiki-header-top');
+            var $middle = $('#middle_outer');
+
+            function adjustMargin() {
+                if ($header.length && $middle.length) {
+                    $middle.css('margin-top', $header.outerHeight() + 'px');
+                }
+            }
+
+            // Initial adjust
+            adjustMargin();
+
+            // Update on window resize
+            $(window).on('resize', adjustMargin);
+
+            // Update if header size changes
+            if (typeof ResizeObserver !== 'undefined') {
+                var ro = new ResizeObserver(adjustMargin);
+                $header.each(function () { ro.observe(this); });
+            }
+        })(jQuery);
+    {/jq}
 
     {include file='footer.tpl'}
 </body>



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

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