我在水平滚动方面遇到问题。我的mat-tree实现来自here。垂直滚动效果很好,但水平滚动不起作用。如何将其添加到我的垫树中?通过使用溢出参数,我看到了水平滚动条,但它不起作用,对内容没有反应,并且仍被禁用。
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
<button mat-icon-button disabled></button>
{{node.item}}
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
<button mat-icon-button
[attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.item}}
<mat-progress-bar *ngIf="node.isLoading"
mode="indeterminate"
class="example-tree-progress-bar"></mat-progress-bar>
</mat-tree-node>
</mat-tree>
.example-tree-progress-bar {
margin-left: 30px;
}
答案 0 :(得分:1)
您是否尝试过将样式为mat-tree-node
的类添加到子项overflow:visible!important
。
这是要添加的完整类。
.tree-node {
margin: 0;
padding: 0;
padding-right: 1%;
list-style: none;
border: none;
overflow: visible !important; /* notice here*/
}
答案 1 :(得分:0)
https://github.com/angular/flex-layout/wiki/fxFlex-API对我有用,应该是因为它在包装div时设置了max-width = 20%:
<div fxFlex="1 1 20%" fxLayout="row" style="overflow: scroll">
<mat-tree fxFlex="0 0 auto" ...>
</div>
答案 2 :(得分:0)
尝试在您的scss \ css组件中添加以下代码:
mat-tree {
overflow: auto;
}
mat-tree-node {
overflow: visible !important;
}