Broken nested tree angular mat tree-CodePudding

I have difficulty in solving UI issue of expanding tree on the last node it always giving excessive line from the node just like the picture below. I tried to reduced the the left border height but it still got no change at all. Does anyone has any ideas and how to solve this.

Many Thanks in Advance

Does anyone know why ?

PICTURE HERE

here's the code for the 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 >
          <div >
            <aten-hierarchy-tree-node [hierarchyNode]="node"
                                      (onCollapsingNode)="collapseNode($event)"
                                      (onExpandingNode)="expandNode($event)">
            </aten-hierarchy-tree-node>
          </div>
          <ul >
            <div *ngIf="treeControl.isExpanded(node)">
              <ng-container matTreeNodeOutlet></ng-container>
              <div style="height: 34px;"></div>
            </div>
          </ul>
        </li>
  </mat-nested-tree-node>

CodePudding user response：

In .tree-nested-node there is a padding-left of 30px, now every nested item gets this padding and because nested items are actually inside each other, the padding stacks with every nested item (e.g. 30px for level 1, 30px 30px for level 2, 30px 30px 30px for level 3 and so on).

What you want to do is to get rid of this padding, and give it to the root container element which seems to be .tree-container in your case.

.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
}

CodePudding user response：

Solved by fixing this to

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