Fill Angular Material 2 tab with flex-layout

Question

I'm attempting to create a tabbed app using Angular Material 2, and flex-layout. I can't figure out how to get the content of the tab to expand to fill the screen.

This is what I see:

My code for the layout is as follows, and includes a toolbar and footer.

<div fxFlex fxLayout="column">

  <md-toolbar color="primary">
    Toolbar
  </md-toolbar>

  <md-tab-group>

    <md-tab label="Tab 1">
      <div fxFlex fxLayout="column" style="background-color:lightblue;padding:10px">
        <div style="background:lightgreen;">This should stay as it is</div>
        <div fxFlex style="background:lightgray;">This should expand so it fills the majorty of the screen</div>
      </div>
    </md-tab>

    <md-tab label="Tab 2">
      <h1>some content page 2</h1>
    </md-tab>

    <md-tab label="Tab 3">
      <h1>some content page 3</h1>
    </md-tab>

  </md-tab-group>

  <div>Footer</div>
</div>

I have placing fxFlex at various places and creating extra div containers, all without any success. Any ideas what I should do?

Plunkr created here: http://plnkr.co/edit/eU413bX36I6aZFRTs6cg?p=preview

Try the following and see if it's what you're looking for. I can write an explanation if that works for you. — Alexander Staroselsky
@AlexanderStaroselskyThanks, yes that seems to work. Much appreciated! — Captain Whippet
@AlexanderStaroselsky if you write up the explanation in an answer I will mark it accepted. — Captain Whippet

Alexander Staroselsky Alexander Staroselsky · Accepted Answer · 2017-07-21T14:44:02

This is what you'd need to do to get the material tabs content, which is wrapped in div.mat-tab-body-content full height for your example:

While you had html/body set to 100%, <material-app> was not expanding to the full height. Using :host { min-height: 100vh; } in a linked component stylesheet, ensured it expanding to full height
A similar issue occurs with the div.mat-tab-body-wrapper that is generated when using <md-tab> and wraps all the tab content. Using CSS, either in the component styles or somewhere globally such as style.css, it would need to be set to flex: 1;, which will have it take as much remaining space as possible. height: 100%; would work as well.
Finally the first/child div inside of div.mat-tab-body-content which doesn't have a class would need height: 100%; to take up remaining height now that all it's parents, including div.mat-tab-body-wrapper and div.mat-tab-body are stretching to full height.

With this approach, it should adjust to dynamic toolbar and footer sizes.

Hopefully that helps!

Fill Angular Material 2 tab with flex-layout

2 Answers