CODEWITHSUNDEEP
angularangular-flex-layout
Mad Eddie
Mad Eddie

Reputation: 1217

Angular Material tab height

I am trying to have a full page Angular Material tab which has tabs which are full height and have a centered message. I have created this stakblitz as I can't get it to work. The fxFill's don't seem to Fill and I am not sure if this is an issue with the Flexbox layout or Angular Material. I don't want to force a height as within each tab as that seems to defeat the point of flexible layouts.

Am sure its simple but help a poor confused developer who is used to Bootstrap grid :)

UPDATE Adding height: calc(100vh - 100px); to the parent div and then also to the tall.component div makes things work but surely this is a bad solution

Upvotes: 23

Views: 54321

Answers (5)

Simon_Weaver
Simon_Weaver

Reputation: 146188

In a grid layout it can be as simple as setting overflow:auto on the tab control. I do something like this:

.container 
{
   display: grid;
   grid-template-rows: auto 1fr;
   gap: 1em;

   mat-tab-group
   {
       overflow: auto;
   }
}

Where .container contains the toolbar and tab group.

Even if I have a mat-table inside the grid it correctly sizes. Sorry I don't have time to make a complete example now.

Upvotes: 1

NicuVlad
NicuVlad

Reputation: 2601

For me this works:

mat-tab-group {
    height: 100%;

    ::ng-deep .mat-mdc-tab-body-wrapper {
        flex: 1 1 100%;
    }
}

Be sure that the parent also have the height 100%.

For Angular below 16 remove the -mdc- from the class name

Upvotes: 0

Ploppy
Ploppy

Reputation: 15363

In order to fill the page, the page needs to fill the window:

styles.css

body, html{
  height: 100%;
  margin: 0;
}

The app component needs to fill the body:

app.component.css

:host{
  box-sizing: border-box;
  display: block;
  height: 100%;
}

By default the wrappers of the content within the tabs are not filling the tab's height so we will fix this:

styles.css

    .mat-tab-body-wrapper, // angular < 16
    .mat-mdc-tab-body-wrapper // angular >= 16
    {
      flex-grow: 1;
    }

We also need to have the mat-tab-group fill the height, its parent needs to fill the height too, so we will give an id to both the wrapper and the tab-group.

app.component.html

<div id="wrapper"> <!-- give it an id -->
    <div fxLayout="row" fxLayoutGap="16px" fxFill>
        <div fxFlex="20">
            <p>Fun Sidebar</p>
        </div>
        <div fxFlex="80" fxFill>
            <mat-tab-group id="tab-group"> <!-- give it an id -->
                <mat-tab label="Summary">
                    <div fxFlex style="padding: 16px;">
                        <div class="mat-display-2">Hello</div>
                        <p>Lorem ipsulem</p>
                    </div>
                </mat-tab>
                <mat-tab label="Tall content">
                    <app-tall-component></app-tall-component>
                </mat-tab>
            </mat-tab-group>
        </div>
    </div>
</div>

app.component.css

#wrapper{
  padding: 16px; 
  min-height: 100%; 
  height: 100%; 
  box-sizing: border-box;/*new*/
}
#tab-group{
  height: 100%;
}
#tab-group mat-tab-body {
  flex-grow: 1;
}

https://stackblitz.com/edit/angular-awamwn?file=src%2Fapp%2Fapp.component.html

Upvotes: 33

Suhayb
Suhayb

Reputation: 3271

According to Angular docs: you need to set the dynamicHeight input to true <mat-tab-group dynamicHeight>

By default, the tab group will not change its height to the height of the currently active tab. To change this, set the dynamicHeight input to true. The tab body will animate its height according to the height of the active tab.

Upvotes: 10

AHL
AHL

Reputation: 493

This is worked for me to assign dynamic value for height.

:host ::ng-deep .mat-tab-body-wrapper {
  height: 600px;

}

:host ::ng-deep .mat-tab-body.mat-tab-body-active {
  height: 600px;

}

Upvotes: 13

Related Questions