View Issue Details

WikiRelated ChangesetsJump to Notes
IDProjectCategoryView StatusDate SubmittedLast Update
0035402mantisbthtmlpublic2025-02-19 10:232025-03-09 01:44
Reporterraspopov Assigned Tocommunity  
PrioritynormalSeverityminorReproducibilityalways
Status resolvedResolutionfixed 
PlatformMicrosoftOSWindows ServerOS Version2022
Product Version2.27.0 
Target Version2.28.0Fixed in Version2.28.0 
Summary0035402: Footer has the wrong size
Description

In the new MantisBT interface, the footer is at the bottom of the page with absolute positioning so that it “sticks” to the bottom of the page, while the rest of the page has relative positioning. By default, these elements can overlap, and to avoid this, the footer has been hard-coded to have a top margin of 75 px. But this value must correspond to the height of the footer, otherwise when scaling the page, the footer elements may line up on top of each other and the size will increase. And this leads to exceeding the reserved margin and overlap with the page content.

Steps To Reproduce

Choose the size of any small smartphone and expand/collapse widgets watching the distance to the footer change.

Additional Information

The solution to the problem is pretty simple, we'll have to honestly calculate the footer size and dynamically change its margin. By adding the following code to the ace.js file:

$(function() {
    $('.footer')[0].style.paddingTop = $('.footer-content')[0].clientHeight + 'px';
}() );

Perhaps this will fix issue 0022250 as well, and help in the implementation of 0022098.

TagsNo tags attached.

Relationships

Relationship GraphDependency Graph
related to 0022250 resolvedcommunity It would be nice to remove the useless spaces in the footer 
related to 0022098 resolvedcommunity Setting bottom_include_page does not include specified file 

Activities

raspopov

raspopov

2025-02-20 09:59

reporter   ~0069883

After reading several books on jQuery and CSS this is the best I could write:

...
    // Adjust footer height based on its content
    var footer = $('.footer');
    var footer_content = $('.footer-content');
    $(window).on('resize.footer', function() {
        footer.css('padding-top', parseInt(footer_content.height()) + 'px');
        }).triggerHandler('resize.footer');

})(window.jQuery);

This code is quite optimal and reliable.
dregad

dregad

2025-03-05 13:03

developer   ~0069942

PR https://github.com/mantisbt/mantisbt/pull/2102

Related Changesets

MantisBT: master 2ebef4ea

2025-03-05 12:56

dregad


Details Diff		 Restore included pages functionality

- Restored working of top_include_page and bottom_include_page options.
- Restored generation of EVENT_LAYOUT_PAGE_HEADER event.
- Added dynamic footer resizing.

The top_include_page file is included within the navbar element, which
is fixed at the top of the page; the bottom_include_page file is
included within an existing footer or as a footer itself (on login
pages), which is also fixed at the bottom of the page. Because of this,
the include template must contain, for example, a div element with a
solid background.

Fixes 0035402, 0022250, 0022098, 0021113
PR https://github.com/mantisbt/mantisbt/pull/2102		 Affected Issues
0021113, 0022098, 0022250, 0035402
mod - config_defaults_inc.php Diff File
mod - core/html_api.php Diff File
mod - core/layout_api.php Diff File
mod - css/ace-mantis.css Diff File
mod - docbook/Admin_Guide/en-US/config/html.xml Diff File
mod - js/common.js Diff File