破碎的嵌套树angular垫子树

Question

我很难解决UI在最后一个节点上扩展树的问题，它总是从节点给出过多的行，如下图所示。我试图降低左边框的高度，但它仍然没有任何变化。有没有人有任何想法以及如何解决这个问题。

非常感谢

有谁知道为什么吗？

PICTURE HERE

这是 CSS

的代码

.tree-nested-node {
  padding-left: 30px;
}

mat-tree {
  margin-left: 18px;
}
.mat-tree-node {
  padding: 0;
  background-color: white;
  width: 100%;
  display: block;
}

.mat-nested-tree-node {
  top: -24px;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li.tree-container {
  border-bottom: 0;
  /*display: block;*/
}

ul {
  padding-left: 10px;
}

li {
  padding-left: 10px;
  border: dotted grey;
  border-width: 0 0 1px 1px;
  position: relative;
  top: -1px;
}

li.mat-tree-node,
li div {
  margin: 0;
  position: relative;
  top: 24px;
}

li ul {
  border-top: 1px dotted grey;
  margin-left: -10px;
  padding-left: 28px;
}

.mat-nested-tree-node:last-child ul {
  border-left: 0;
  margin-left: -10px;
}


td.node-number {
  width: 90px !important;
  text-align: right !important;
}

td.node-icon {
  width: 30px !important;
  text-align: center !important;
}

table.node-box {
  width: 100%;
}

 <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
        <li class="tree-container">
          <div class="mat-tree-node">
            <aten-hierarchy-tree-node [hierarchyNode]="node"
                                      (onCollapsingNode)="collapseNode($event)"
                                      (onExpandingNode)="expandNode($event)">
            </aten-hierarchy-tree-node>
          </div>
          <ul class="tree-nested-node">
            <div *ngIf="treeControl.isExpanded(node)">
              <ng-container matTreeNodeOutlet></ng-container>
              <div style="height: 34px;"></div>
            </div>
          </ul>
        </li>
  </mat-nested-tree-node>

Answer 1

在 .tree-nested-node 中有一个 padding-left of 30px，现在每个嵌套项目都有这个填充，因为嵌套项目实际上在内部，填充堆叠每个嵌套项目（例如，第 1 级为 30px，第 2 级为 30px + 30px，第 3 级为 30px + 30px + 30px，依此类推）。

你想要做的是摆脱这个填充，并将它提供给根容器元素，在你的情况下似乎是 .tree-container。

.tree-nested-node {
  // padding-left: 30px; <- get rid of this
  padding-left: 0;
}

.tree-container {
  padding-left: 30px; // <- add it here so it doesn't stack
}

Answer 2

解决这个问题

.mat-nested-tree-node:last-child ul {
  border-left: 1px solid white;
  margin-left: -11px;
  z-index: 10;
}

破碎的嵌套树angular垫子树

Broken nested tree angular mat tree

css

material-ui

angular