2

I'm using Neular NbLayoutComponent with one column as a main container for an Angular Application as shown below. 

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

The content of the tag <nb-layout-column> </nb-layout-column> is not displayed across the entire page width. Even by assigning a width of 100% to the content placed in <nb-layout-column> </nb-layout-column> nothing happens. There is a margin that remains on the right side.

How can I fix this problem?

Usama Abdulrehman
  • 1,041
  • 3
  • 11
  • 21
user3676871
  • 21
  • 3

1 Answers1

0

I solved my problem after read Nebular doc. Before, I assigned a value in percentage to layout column width for responsive behavior. Unfortunately nothing happened. By using a width value in pixel, the page content is displayed across entire available screen proportionally.

Then I implemented a HostListener for resize window event to track screen width change as shown below:

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

getInnerWidth(): number {
  let result = 0;

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

  return result;
}

The width of layout column is assigned like this:

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

The layout column is adjusted when window is resized. This works normally.

I hope this is can help someone.

user3676871
  • 21
  • 3