Невозможно отобразить содержимое страницы на всем экране, доступном с помощью Nebular NbLayoutComponent - PullRequest
Новая
       51

Невозможно отобразить содержимое страницы на всем экране, доступном с помощью Nebular NbLayoutComponent

1 голос
/ 28 мая 2020

Я использую Neular NbLayoutComponent с одним столбцом в качестве основного контейнера для Angular приложения, как показано ниже. 

<nb-layout windowMode>
 <nb-layout-header fixed ></nb-layout-header>
 <nb-sidebar tag="sidebar" responsive start></nb-sidebar>
 <nb-layout-column>
    Page content here
 </nb-layout-column> 
 <nb-layout-footer fixed></nb-layout-footer>
</nb-layout>

Содержимое тега <nb-layout-column> </nb-layout-column> не отображается по всей ширине страницы. Даже при назначении ширины 100% содержимому, помещенному в <nb-layout-column> </nb-layout-column>, ничего не происходит. С правой стороны остается поле.

Как исправить эту проблему?

1 Ответ

0 голосов
/ 29 мая 2020

Я решил свою проблему после прочтения Nebular do c. Раньше я назначал значение в процентах ширине столбца макета для гибкого поведения. К сожалению, ничего не произошло. Используя значение ширины в пикселях, содержимое страницы отображается на всем доступном экране пропорционально.

Затем я реализовал HostListener для события изменения размера окна, чтобы отслеживать изменение ширины экрана, как показано ниже: 

@HostListener('window:resize') onWindowResize() {
  this.innerWidth = this.getInnerWidth() – 50;
}

getInnerWidth(): number {
  let result = 0;

  if (isPlatformBrowser(this._platformId)) {
    result = window.innerWidth;
  }

  return result;
}

Ширина столбца макета назначается следующим образом: 

<nb-layout-column [style.width.px]="innerWidth">
   <router-outlet></router-outlet>
</nb-layout-column>

Столбец макета корректируется при изменении размера окна. Это нормально работает.

Надеюсь, это кому-то поможет.

...