resize event not triggered after expand treemenu

I try to update v2.1.2 to actual v2.4. But when I update old app.min.js to new adminlte.min.js, I get the following issue:

If I use a content page that is smaller then the browser’ height and expand one of the treeview-menus on the left sidebar, the footer should move down to always stay on page’s bottom. This was workig in the older versions, but does not in v2.4

I also tried to reproduce it with the demo page: With the browser’s developert tools, I removed some of the content, did a browser resize and swithed back to fullscreen, and than expanded one of the treemenu.

This is what I get before expand e.g. the Charts-Menu (everything is as axpected):

And after expand Charts: The Footer is not aligned to bottom and there are two scrollbars on the right. It goes to normal if I collapse the menu or do a screen resize - but the resize event sould get triggered automatically.

[Th3M3]

The following things I found out:

• jquery 3.2.1 don’t work correctly to me. It gets wrong height and outerHeight values, if browser’s zoom factor is not set to 100%. With jQuery 3.1.1 the values are correctly.

• in adminlte(.min).js I found an issue:

  • The sidebar’s height should be the full element’s height (including margin and padding)
  • While comparing sidebarHeight with windowHeight, it’s needed to also add the header’s height to get the overall height, because the menu-sidebar is placed under the header.
  • I also would add a function to round up the neg variable. In my case, in Opera I always had a scrollbar to scroll only 1px, because I need to use a page zoom factor.
  • added setTimeout function before read the controlSidebar’s height, because without it sometimes returned a insufficient value.

Here my suggestion to the code. My changed lines are marked with a red > on the left.

    // Get window height and the wrapper height
    var footerHeight  = $(Selector.mainFooter).outerHeight() || 0
    var neg           = $(Selector.mainHeader).outerHeight() + footerHeight
    var windowHeight  = $(window).height()
>   var sidebarHeight = $(Selector.sidebar).outerHeight() || 0
>   var headerHeight = $(Selector.mainHeader).outerHeight() || 0

    // Set the min-height of the content and sidebar based on
    // the height of the document.
    if ($('body').hasClass(ClassName.fixed)) {
      $(Selector.contentWrapper).css('min-height', windowHeight - footerHeight)
    } else {
      var postSetHeight

>     if (windowHeight >= sidebarHeight + headerHeight) {
>        $(Selector.contentWrapper).css('min-height', windowHeight - Math.ceil(neg))
>        postSetHeight = windowHeight - Math.ceil(neg)
      } else {
>        $(Selector.contentWrapper).css('min-height', sidebarHeight - footerHeight)
>        postSetHeight = sidebarHeight - footerHeight
      }

      // Fix for the control sidebar height
      var $controlSidebar = $(Selector.controlSidebar)
>     setTimeout(function(){
         if (typeof $controlSidebar !== 'undefined') {
           if ($controlSidebar.height() > postSetHeight)
             $(Selector.contentWrapper).css('min-height', $controlSidebar.height())
         }
>     }, 0);
    }
  }

Please review/test out my code. For me it works fine.

[jaydenseah]

@Th3M3 you’re most welcome.

Regarding the bower_components part, try downloading the master branch, and you should be able to see it. Cheers!