Question

我在水平滚动方面遇到问题。我的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;
}

Answer 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*/ 
  }

Answer 2

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>

Answer 3

尝试在您的scss \ css组件中添加以下代码：

mat-tree {
    overflow: auto;
}

mat-tree-node {
    overflow: visible !important;
}

垫树水平滚动。如何添加呢？

3 个答案: