1) I have a mat-toolbar (fixed size: min-width:64px),
2) below the mat-toolbar, I have a Mat-Tab group,
3) some Tab contents are long, so I need a scrollbar only inside the tab.
4) However, the Last lines of the Scrollable content are clipped and not visible.
<div fxFill style="overflow:hidden !important">
<mat-toolbar color="primary" style="min-height:64px !important">
<button mat-icon-button>
<mat-icon>Toolbar</mat-icon>
</button>
</mat-toolbar>
<mat-tab-group fxFill>
<!-- need this tab content to fill -->
<mat-tab label="Short-1">
<div fxFill fxLayout="column" style="background-color:lightblue;">
<p>Short Content 1</p>
</div>
</mat-tab>
<!-- need this to scroll but last few lines are clipped-->
<mat-tab label="Long">
<div fxFill fxLayout="column" style="overflow:auto;background-color:yellow;">
<div >
<p *ngFor="let line of lines">{{line}}</p>
</div>
</div>
</mat-tab>
<!-- need this tab content to fill -->
<mat-tab label="Short-2">
<div fxFill fxLayout="column" style="background-color:lightgreen;">
<p>Short Content 2</p>
</div>
</mat-tab>
</mat-tab-group>
Your toolbar has min-height: 64px !important;, so, on your tab please change:
min-height: 100%; with min-height: calc(100% - 64px);
It's working.!
Thanks to @Liviu Nita
I've replaced
mat-tab-group fxFill>
into
<mat-tab-group style="height: calc(100% - 64px); min-height: calc(100% - 64px); min-width: 100%; width: 100%; margin: 0px;">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.