Adminlte: "content-wrapper" has wrong "min-height" after resize

[Schabrock]

Hi!

When i resize the window so the left navbar disappears and re-maximes the window again it looks like the footers height would change.

Only happens when the content-page isn't scrollable. (Tested on: https://almsaeedstudio.com/themes/AdminLTE/pages/examples/blank.html)

The misbehaviour only seems to appear in the latest und previous chrome version(44.0.2403.89).
When tried on latest Firefox and IE everything works just fine.

[almasaeed2010]

I tried to replicate the issue but couldn't come up with the same result. Could it be an issue on Windows Chrome? I am using the same release of chrome on a mac but I could reproduce the bug.

[ivanpg]

Hello,
I have the same problem when I resize in Chrome (ubuntu). When I resize (small size) and back to initial size, the footer is bigger.

Regards and thanks for your time.

[FalconDev91]

@ivanpg @Schabrock Did you guys fix it? I'm having the same problem.I've been trying to fix it for the past 6 hours and still no luck!

[riotbr]

@FalconDev91 , I had the same problem and solved right now with:

/* Layout */
.wrapper {
  /*min-height: 100%;
  position: relative;
  overflow: hidden;*/
  width: 100%;
  min-height: 100%;
  height: auto !important;
  position: absolute;
}

[KrishnaPG]

@riotbr Somehow it is not working for me, still seeing the same problem.

[KrishnaPG]

The problem could be with css animations taking more time and resize handler getting called _before_ the css heights have settled.

Did not test this thoroughly, but in the initial testings it look like debouncing the resize handler looks like taking care of the size issues. (Besides, debouncing the resize handlers is also good for cpu). Below is the modified code (requires lodash):

      $(window, ".wrapper").resize(_.debounce(function () {
         _this.fix();
        _this.fixSidebar(); }, 250));

Line 245 in app.js

[KrishnaPG]

Also, combining this below additional css for min-height animation makes the footer-height transition looks smooth

.content-wrapper {
    -webkit-transition: min-height 0.2s ease-in-out;
    -o-transition: min-height 0.2s ease-in-out;
    transition: min-height 0.2s ease-in-out;
}

[LeonardoGentile]

@KrishnaPG where have you modified the .content-wrapper {...}? Have you modified the .less or directly the .css?

[KrishnaPG]

I modified in the AdminLTE.css and used it.

[LeonardoGentile]

@kkirsche :+1: thanks also for the _.debounce I didn't know about it

[KrishnaPG]

With the .content-wrapper ease-in-out animations the re-sizing happens smoothly (animated), but there is small problem - initially the size may be off (until the animation kicks-in with some resizing). So, for now I am just using the _debouncer_ without the .content-wrapper animations.

[gusgol]

Another thing you can do is to set a min-height to your .content-wrapper

.content-wrapper {
    min-height: 738px;
}

[patforg]

If you do not want to use _.debouce() you can simply use the following:

$(window).load(function() {
    setTimeout(function() {
        $.AdminLTE.layout.fix();
        $.AdminLTE.layout.fixSidebar();
    }, 250);
});

It re-flows the layout 250ms after window on load.

[HosMercury]

@riotbr worked as magic thx

[keomaborges]

I got a simply solution:

  <style>
    .content-wrapper {
      min-height: 0px !important;
    }
  </style>

[marisveide]

Strange is that $(window).height changes if window is resized horizontally only. This is really giving bad visual result on the contents.

[davidjsalazarmoreno]

@patforg solution works for me, thanks!

[meyacine]

I've added this on css

.wrapper {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    position: absolute;
}
.content-wrapper{
    bottom: 50px;
    position: fixed;
    width: 100%;
    top: 50px;
}
.main-footer{
    bottom: 0px;
    position: fixed;
    width: 100%;
}

[RahulS2017]

what is the issue that dark blue color which i define in body that color overlapping of left side nav

[wonk4rol]

thanks @meyacine, i have issue with org chart n solved now.

[renopaslah]

just insert <!DOCTYPE html> before tag <html>

[jswxwxf]

thanks @meyacine, your solution is the easiest one. :)

[szanellato93]

resolved with @keomaborges solution and add to html body the background color of the content-wrapper

[LaeraFelipe]

ngOnInit() { $('body').layout('fix'); }

[dovalgomes]

Hello people, in my solution I was having the same problem use in my onInit () event the following code:

$ ('body'). resize () and worked

[asdiyanarisha]

@dovalgomes thanks its worked for me, i put that code in my js