Angular Material tab height

怎甘沉沦 提交于 2019-12-05 03:24:05

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{
  flex-grow: 1;
}

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

app.component.ts

<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

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;

}

According to Angular docs: you need to set the dynamicHeight input to true [dynamicHeight]='true'

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!