Неправильная минимальная высота оболочки содержимого AdminLTE и AngularJS

я пытаюсь использовать AngularJS (и ui.router) с этим шаблоном для частичного и шаблонного. (Чтобы сделать его одностраничным).

Хотя моя страница отображается нормально, тег .content-wrapper div получает неправильный атрибут min-height (564px;) при использовании с angular. Но когда я просматриваю starter.html, образец страницы, все в порядке (494px;).

Может кто-нибудь объяснить мне, почему он это делает? Это бутстрап? Ангуляр или тема? Или комбинация?

Источник (отрендеренный в хроме, свернутый для уменьшения размера): Источник, отображаемый в Chrome

То же самое происходит и при просмотре на больших экранах. Нижний колонтитул теперь выходит за пределы экрана, за пределы области просмотра, и появляется полоса прокрутки, но контента нет, так как это просто заголовок страницы для целей тестирования.

У кого-нибудь есть идея, где искать?

ИЗМЕНИТЬ:

Узнал в чем проблема, решения пока не нашел:

В app.js, используемом темой, есть следующий код:

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

Я поместил этот код в тег script внизу страницы и сделал из него предупреждение:

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

Высота заголовка равна NULL, нижний колонтитул — 31, а окно — 595. Когда я выполняю эту команду отдельно в консоли (после того, как страница полностью отобразится), она дает мне: заголовок: 50, нижний колонтитул: 51, высота окна 595. (51 + 50 = 101. 595 - 101 = 494. Правильная высота обертки содержимого).

Таким образом, JQuery не может определить высоту верхнего и нижнего колонтитула, вероятно, потому, что они еще не отрисованы. Так что это, вероятно, проблема ui.router/Angular?

Сначала я загружаю угловой и угловой маршрутизатор пользовательского интерфейса, а затем мои угловые скрипты. Затем JQuery, начальная загрузка и, наконец, app.js для темы.

Кто-нибудь знает, как это решить?


javascript css angularjs twitter-bootstrap-3 adminlte
person Fjarlaegur    schedule 22.02.2016    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Итак, я использую AngularJs2, но думаю, что проблема та же. Как мне удалось это понять, я создал функцию в app.js для AdminLTE, чтобы иметь функцию

function getAdminLTE() {
    return $.AdminLTE
}

и в моем машинописном тексте у меня есть

declare var getAdminLTE: any;

и для моего домашнего компонента у меня есть

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

Это исправит макет после рендеринга домашнего компонента. Не уверен, что есть лучший способ сделать это, но я думаю, что вы уловили суть проблемы в своем описании.

person Mike Chester    schedule 30.04.2016

arrow_upward
1
arrow_downward

Решение для Angular 1.x и AdminLTE 2.4.3:

Под каждой HTML-страницей включите следующий скрипт:

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

Это решение также предназначено для тех, кто получает $.AdminLTE как undefined.

Почти целый день потратил на поиск решения. Надеюсь, это поможет кому-то.

person Ankit Prajapati    schedule 08.05.2018

arrow_upward
0
arrow_downward

Для Angular 6 В вашем файле app.ts объявите var jQuery: any; тогда

ngAfterViewInit() {
   jQuery('body').layout('fix');
}
person Sunil Dadwal    schedule 02.10.2018

arrow_upward
0
arrow_downward

Я делаю, как показано ниже:

Объявите AdminLTE:

declare var adminlte: any;

Позвонить fixLayoutHeight в ngOnInit:

ngOnInit() {
   new adminlte.Layout(document).fixLayoutHeight();
}
person Kawsar Ahmed    schedule 18.11.2018