Adminlte And Angularjs Content Wrapper Wrong Min-height

i am trying to use AngularJS (And ui.router) with this template for partials and templating. (To make it single paged). Although my page is rendered fine, the .content-wrapper div

Solution 1:

So I am using AngularJs2, but I think the problem is the same. The way I managed to figure it out was I created a function in app.js for AdminLTE to have a function

functiongetAdminLTE() {
    return $.AdminLTE
}

and in my typescript I have

declare var getAdminLTE: any;

and for my Home component I have

ngOnInit() {
    getAdminLTE().layout.fix()
}

This will fix the layout after the home component is rendered. Not sure of a nicer way to accomplish this, but I think you captured the essence of the problem in your description.

Solution 2:

A solution for Angular 1.x and AdminLTE 2.4.3:

Below every HTML page, include the following Script:

<script>
    $('body').layout('fix');
</script>

This Solution is also for people who are getting $.AdminLTE as undefined.

Almost spent the full day figuring out the Solution. Hope it helps somebody.

Solution 3:

For Angular 6 In your app.ts file declare var jQuery: any; then

ngAfterViewInit() {
   jQuery('body').layout('fix');
}

Solution 4:

I do as below:

Declare AdminLTE:

declarevaradminlte: any;

Call fixLayoutHeight in ngOnInit:

ngOnInit() {
   new adminlte.Layout(document).fixLayoutHeight();
}