[英]how to Scroll only the Content of a mat-tab
1) I have a mat-toolbar (fixed size: min-width:64px), 1)我有一个垫子工具栏(固定大小:最小宽度:64像素),
2) below the mat-toolbar, I have a Mat-Tab group, 2)在mat-toolbar下方,我有一个Mat-Tab组,
3) some Tab contents are long, so I need a scrollbar only inside the tab. 3)一些选项卡的内容很长,因此我只需要在选项卡内使用滚动条即可。
4) However, the Last lines of the Scrollable content are clipped and not visible. 4)但是,可滚动内容的最后几行被剪切并且不可见。
StackBlitz Example StackBlitz示例
<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: 您的工具栏的最小高度为:64px!important ;,因此,请在您的标签上更改:
min-height: 100%; 最低高度:100%; with min-height: calc(100% - 64px); 最小高度:calc(100%-64px);
It's working.! 工作正常!!
Thanks to @Liviu Nita 感谢@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;">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.