[英]how to Scroll only the Content of a mat-tab
1)我有一个垫子工具栏(固定大小:最小宽度:64像素),
2)在mat-toolbar下方,我有一个Mat-Tab组,
3)一些选项卡的内容很长,因此我只需要在选项卡内使用滚动条即可。
4)但是,可滚动内容的最后几行被剪切并且不可见。
<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>
您的工具栏的最小高度为:64px!important ;,因此,请在您的标签上更改:
最低高度:100%; 最小高度:calc(100%-64px);
工作正常!!
感谢@Liviu Nita
我已经更换了
mat-tab-group fxFill>
成
<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.