CODEWITHSUNDEEP
angularangular-material2angular-flex-layout
Captain Whippet
Captain Whippet

Reputation: 2223

Fill Angular Material 2 tab with flex-layout

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: enter image description here

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

Upvotes: 4

Views: 7547

Answers (2)

profimedica
profimedica

Reputation: 2840

Use a minimum height for your tab group in case you need all tabs the same height

<md-tab-group style='min-height:800px;'>

Upvotes: 0

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38847

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:

  1. 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
  2. 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.
  3. 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!

Upvotes: 4

Related Questions