[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UI] Use Flexbox to keep the page footer at the bottom of the viewport no...

"Gary Cunningham-Lee \(--- via TikiWiki-cvs" <[email protected]> Mon, 06 Oct 2025 04:20:16 +0000
Newsgroups	gmane.comp.cms.tiki.cvs
Message-ID	<68e343809a601_2d76b801c5311@gitlab-sidekiq-low-urgency-cpu-bound-v2-6c84c47dff-44lxr.mail>

Gary Cunningham-Lee pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
08e9bad2 by Gary Cunningham-Lee at 2025-10-06T13:12:27+09:00
[FIX][UI] Use Flexbox to keep the page footer at the bottom of the viewport no...
---
* [FIX][UI] Use Flexbox to keep the page footer at the bottom of the viewport no matter how little page content there is. Styling note: the footer's location in the HTML changed slightly (moved out of div.middle_outer) so any inherited color values, etc., might need to be declared specifically for the footer.

See merge request tikiwiki/tiki!8718

- - - - -


4 changed files:

- lib/smarty_tiki/FunctionHandler/HtmlBodyAttributes.php
- templates/layouts/basic/layout_view.tpl
- templates/layouts/classic/layout_view.tpl
- templates/layouts/social/layout_view.tpl


Changes:

=====================================
lib/smarty_tiki/FunctionHandler/HtmlBodyAttributes.php
=====================================
@@ -23,7 +23,7 @@ class HtmlBodyAttributes extends Base
         $smarty = \TikiLib::lib('smarty');
         $back = '';
         $onload = '';
-        $class = 'tiki' . ' ' . $params['class'] ?? '';
+        $class = 'tiki ' . 'd-flex ' . 'flex-column ' . 'min-vh-100 ' . 'm-0 ' . ' ' . $params['class'] ?? '';
 
         //filename of script called (i.e. tiki-index, tiki-user_information, tiki-view_forum, etc), then sanitize chars
         $script_filename = pathinfo($_SERVER['SCRIPT_NAME'], PATHINFO_FILENAME);


=====================================
templates/layouts/basic/layout_view.tpl
=====================================
@@ -39,7 +39,7 @@
     {include file='tiki-maintenance_banner.tpl'}
 {/if}
 <a class="btn btn-info btn-lg skipnav" href="#col1" role="button">{tr}Skip to main content{/tr}</a>
-<div class="container{if isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y'}-fluid{/if} container-std">
+<div class="container{if isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y'}-fluid{/if} container-std d-flex min-vh-100 flex-column my-0">
     {if !isset($smarty.session.fullscreen) || $smarty.session.fullscreen ne 'y'}
         <div class="row">
             <header class="page-header w-100 navbar-{$navbar_color_variant}-parent bg-{$navbar_color_variant}-parent tiki-top-nav-{$navbar_color_variant}" id="page-header" role=banner>
@@ -207,7 +207,7 @@
     </div>
 
 {if !isset($smarty.session.fullscreen) || $smarty.session.fullscreen ne 'y'}
-    <footer class="row footer main-footer" id="footer">
+    <footer class="row footer main-footer mt-auto" id="footer">
         <div class="footer_liner w-100">
             {$modzonebottom}
         </div>


=====================================
templates/layouts/classic/layout_view.tpl
=====================================
@@ -17,7 +17,7 @@
     {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}' role=complementary}
 {/capture}
 {capture assign=modzonebottom}
-    {modulelist zone=pagebottom class='mt-3' heading_text='{tr}Related content{/tr}' role=complementary}
+    {modulelist zone=bottom class='mt-3' heading_text='{tr}Related content{/tr}' role=complementary}
 {/capture}
 <!DOCTYPE html>
 <html lang="{if !empty($pageLang)}{$pageLang}{else}{$prefs.language}{/if}"{if Language::isRTL()} dir="rtl"{/if}{if !empty($page_id)} id="page_{$page_id}"{/if}>
@@ -219,13 +219,13 @@
                         </div>
                     </div>
                 {/if}
-            </div>
-        </div>
-
+            </div> {* row row-middle *}
+        </div> {* container middle *}
+    </div> {* middle_outer - was missing *}
     {if !isset($smarty.session.fullscreen) || $smarty.session.fullscreen ne 'y'}
     {if $prefs.feature_layoutshadows eq 'y'}
     <div id="footer-shadow">{eval var=$prefs.footer_shadow_start}{/if}
-        <footer class="footer main-footer" id="footer">
+        <footer class="footer main-footer mt-auto" id="footer">
             <div class="footer_liner">
                 <div class="container{if $smarty.session.fullscreen eq 'y'}-fluid{/if} container-std">
                     {$modzonebottom}


=====================================
templates/layouts/social/layout_view.tpl
=====================================
@@ -239,9 +239,10 @@
                 {/if}
             </div> {* row *}
         </div> {* container *}
+    </div> {* middle-wrapper *}
     </div> {* middle_outer *}
     {if !isset($smarty.session.fullscreen) || isset($smarty.session.fullscreen) && $smarty.session.fullscreen ne 'y'}
-        <footer class="footer main-footer" id="footer">
+        <footer class="footer main-footer mt-auto" id="footer">
             <div class="footer_liner">
                 <div class="container container-std">
                     {$modzonebottom}



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

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