No errors but content isn't showing up when served from within <ng-sidebar-container></ng-sidebar-container>

[FlashBanistan]

Nothing shows on the page with the following configuration. If I remove the ng-sidebar-container the router outlet works fine but not when it's inside of the ng-sidebar-container.
Here's the full source https://github.com/FlashBanistan/ng2-property-management

AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { AppRouter } from './app-router.module';

import { SidebarModule } from 'ng-sidebar';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRouter,
    SidebarModule.forRoot()
  ],
  exports: [
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy}
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

AppComponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  private _opened: boolean = false;
 
  private _toggleSidebar() {
    this._opened = !this._opened;
  }

  title = 'app';
}

AppComponent.html

<ng-sidebar-container>
      <h1>hello</h1>

      <!-- A sidebar -->
      <ng-sidebar 
        [(opened)]="_opened"
        mode="push"
        autoCollapseWidth=500>
        
        <p>Sidebar contents</p>
        <p>Sidebar contents</p>
        <p>Sidebar contents</p>
        <p>Sidebar contents</p>
        <p>Sidebar contents</p>

      </ng-sidebar>

      <!-- Page content -->
      <div ng-sidebar-content>
        <router-outlet></router-outlet>
        <button (click)="_toggleSidebar()">Toggle sidebar</button>
      </div>

    </ng-sidebar-container>

[arkon]

Are you using v6.0.0? If so, there's some changes required, check out the README for more info.

EDIT: Just saw your edit. Looks like you have your div[ng-sidebar-content], so I'm not sure what's wrong with it. I'll need to check this out more later.

[FlashBanistan]

@arkon Yes I'm using v6.0.0. I copied verbatim the example in the readme and it's not working.

[arkon]

You should ensure that the various components have 100% height.

[FlashBanistan]

@arkon That fixed it. I applied a style of height: 100vh to the ng-sidebar-container.

[arkon]

@FlashBanistan Awesome. 👍

[tstockwell]

FYI, I also fixed this issue by putting style="position:absolute" on the ng-sidebar-container element.
I am using mode="push" and animate=true.
I can't claim to understand why that works, I discovered it by messing around with the styles in Chrome.

[tayambamwanza]

FYI, I also fixed this issue by putting style="position:absolute" on the ng-sidebar-container element.
I am using mode="push" and animate=true.
I can't claim to understand why that works, I discovered it by messing around with the styles in Chrome.

This is good because I got bitten by IE not having good vh vw support as well as safari mobile