In general, there is HTML that displays elements as a tree. If only subfolders are in a subfolder, then everything is fine, and when there is both an item and other folders in the same folder, then before the folder names there is an indentation the size of an element that is in the same folder. I can’t fix it, please tell me the screen is attached.

HTML:

<div class="treecomponents"> <div *ngFor="let tree of SendTrees" class="treecomponent"> <i *ngIf="tree.leaf" class="btn btn-light btn-sm glyphicon glyphicon-{{tree.isExpanded ? 'minus' : 'plus'}}" (click)="onExpand(tree)"></i> <div class="nodeinfo"> <span class="{{tree.leaf ? 'nodeinfo' : 'btn btn-link'}}" (click)="onSelectNode(tree)"> {{tree.categoryName}} </span> <tree-view [SendTrees]="tree.nodes" [SelectedNode]="SelectedNode" (onSelectedChanged)="onSelectNode($event)" (onRequestNodes)="onRequestLocal($event)" *ngIf="tree.isExpanded"> </tree-view> </div> </div> </div>

CSS:

 .treecomponents { display:table; list-style-type: none; padding-left: 5px; } .treecomponent { display: table-row; list-style-type: none; } .glyphicon-plus:before { content: "\2b"; } .glyphicon-minus:before { content: "\2212"; } .nodeinfo { display: table-cell; padding-left: 5px; cursor: pointer; list-style-type: none; white-space: nowrap; }

Screen:

Screen

    1 answer 1

    This is how everything displays correctly:

    HTML:

     <ul class="treecomponents"> <li *ngFor="let tree of SendTrees" class="treecomponent"> <i *ngIf="tree.leaf" class="btn btn-light btn-sm glyphicon glyphicon-{{tree.isExpanded ? 'minus' : 'plus'}}" (click)="onExpand(tree)"></i> <a class="{{tree.leaf ? 'node' : 'btn btn-link nodetext'}}" (click)="onExpand(tree)">{{tree.categoryName}}</a> <div> <tree-view [SendTrees]="tree.nodes" [SelectedNode]="SelectedNode" (onSelectedChanged)="onSelectNode($event)" (onRequestNodes)="onRequestLocal($event)" *ngIf="tree.isExpanded"> </tree-view> </div> </li> </ul>

    CSS:

     .treecomponents { display:table; list-style-type: none; padding-left: 16px; } .treecomponent { display: table-row; list-style-type: none; } .glyphicon-plus:before { content: "\2b"; } .glyphicon-minus:before { content: "\2212"; } .nodeinfo { display: table-cell; padding-left: 5px; list-style-type: none; } .node { cursor: pointer; -webkit-user-select: none; } .nodetext { color: #5fb611; }

    Screen:

    screen