Adminlte: sidebar not till its full height

[chiseledCoder]

the sidebar is not getting displayed to full height.

[almasaeed2010]

Hello,
It may be easier for us to help you if you give us access to the page. I can't determine the issue just from a screenshot.

Thanks!

[FalconDev91]

I'm having the same problem.When I resize the window by double clicking the title bar the sidebar height is incorrect and I've been trying all day to fix it but still no luck! :(

[FalconDev91]

@niks-codificador Did you fix it?

[chiseledCoder]

@FalconDev91 not yet. Even I banged my head to get it fixed.

[chiseledCoder]

@FalconDev91 I figured the error out. Yeah it quite late, like after months.
Put sidebar code in wrapper class. See below

Hope it helps you. it helped me. Thanks @almasaeed2010 for this amazing template.

[wolfhog]

I'm still having this issue on 2.3.3, putting the sidebar in wrapper class does not work for me:

[chiseledCoder]

Share your code so that I could help you with!

[andresabello]

I managed to do it using jQuery. Simply get the height of the current document once it is loaded and then assign that height to the sidebar.

jQuery(document).ready(function($){ $('.main-sidebar').height($(document).outerHeight()); });

In my case the sidebar has a class of main-sidebar. You can change it to your value.

[taozhiyuzhuo]

@nikhilshirsath1993 did you fix it?

[comedydriving]

I know this is an old thread, but just in case someone else comes across it. I found the problem was that if the page dynamically changes height (say an ajax table loading) then the main-sidebar doesn't adjust it's height. So I took andresbello's solution a step further and watch for document height changes and then adjust the sidebar height appropriately:

    function onElementHeightChange(elm, callback) {
        var lastHeight = elm.clientHeight, newHeight;
        (function run() {
            newHeight = elm.clientHeight;
            if (lastHeight != newHeight)
                callback();
            lastHeight = newHeight;

            if (elm.onElementHeightChangeTimer)
                clearTimeout(elm.onElementHeightChangeTimer);

            elm.onElementHeightChangeTimer = setTimeout(run, 200);
        })();
    }


    onElementHeightChange(document.body, function () {
        //alert('Body height changed');
        $('.main-sidebar').height($(document).outerHeight());
    });

[faviocabral]

aside class="main-sidebar sidebar-dark-primary elevation-4" style="margin-top:0px;"

I add this : style="margin-top:0px;"
to my aside element
on angular 8
funciono para mi

works for me.