Search code examples
cssangularflexboxangular-material2angular-flex-layout

Unable to get div containing router-outlet to flex with flex-layout library

I am having a play with angular flex-layout on an angular 6 cli generated project and am having a hard time getting a router-outlet to fill available height in a column layout.

In my root app component markup I have the following:

<div fxLayout="column" fxFlex>
  <app-header-bar></app-header-bar>
  <div fxFlexFill>
    <router-outlet></router-outlet>
  </div>
  <app-navbar></app-navbar>
</div>

which renders as:

enter image description here

The div containing my router-outlet is not filling all available space as I end up with whitespace as per the yellow shaded area on the image above.

I have tried apply height:100% to the html and body elements, but this make no difference.

I have used angular-material in an older angular 1.x project before, so am familiar with the typical flex attribute approach they use, but I must admit I have found the flex-layout library a bit more challenging to get working.

Has anyone else faced similar issues? I feel like I have missed something obvious!

Thanks

Solution

  • Try this:

    <div fxLayout="column" fxFlexFill>
  <app-header-bar></app-header-bar>
  <div fxFlex>
    <router-outlet></router-outlet>
  </div>
  <app-navbar></app-navbar>
</div>

    styles.scss

    html,
body {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

    it should work as long as column is a direct child of body. If not please make a codepen or something where we can see something.

    Hope that helps!