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 tag gets the wrong min-height attribute (564px;) when used with angular. But when i view the starter.html, the sample page, its fine (494px;).

Can someone explain to me why it does this? Is this Bootstrap? Angular or the theme? Or a combination?

Source (As rendered in chrome, collapsed to keep it small):

It also does the same when viewed on bigger screens. The footer now falls off the screen, outside the viewport, and a scroll bar appears but there is no content as it is just the page header for testing purposes.

Anyone got an idea where to look?

EDIT:

I found out what the problem is,i havent found a solution yet:

In the app.js used by the theme is the following code:

 var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
 var window_height = $(window).height();

I placed this code in a script tag at the bottom of the page and made an alert out of it:

<script>
    var head = $('.main-header').outerHeight();
    var foot = $('.main-footer').outerHeight();
    var window_height = $(window).height();
    alert("Header: " + head + " Footer: " + foot + " Window: " + window_height);
</script>

Header height is NULL, footer is 31 and window is 595. When i execute these command seperately in the console (After the page is fully rendered) it gives me: header: 50, footer: 51, window height 595. (51 + 50 = 101. 595 - 101 = 494. Which is the correct content wrapper height).

So JQuery cant decide the height of the header and footer, probably because they arent rendered yet. So this is probably a ui.router/Angular issue?

I first load angular and angular ui router, then my angular scripts. Then JQuery, bootstrap and finally the app.js for the theme.

Anyone knows how to solve this?

回答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

function getAdminLTE() {
    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.

回答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.

回答3:

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

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

回答4:

I do as below:

Declare AdminLTE:

declare var adminlte: any;

Call fixLayoutHeight in ngOnInit:

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

来源：https://stackoverflow.com/questions/35556569/adminlte-and-angularjs-content-wrapper-wrong-min-height

标签

javascript

css

angularjs

twitter-bootstrap-3

adminlte