#html #css #angular #angular-material
Вопрос:
[![Как удалить отмеченную дополнительную границу из дерева мата?
.tree-nested-node { padding-left: 30px; } .mat-tree { margin-left: 40px; } .mat-tree-node { padding: 0; background-color: white; } .mat-nested { top: -24px; } ul, li { list-style: none; margin: 0; padding: 0; } li.tree-container { border-bottom: 0; } ul { padding-left: 40px; } li { padding-left: 40px; border: 2px solid #c3cbd7; border-width: 0 0 2px 2px; position: relative; top: -24px; } li.mat-tree-node, li div { margin: 0; position: relative; top: 24px; } li ul { border-top: 2px solid #c3cbd7; margin-left: -40px; padding-left: 60px; } .mat-nested:last-child ul { border-left: 1px solid white; margin-left: -41px; } .mat-icon-button { z-index: 100; }
Here is the HTML part lt;mat-tree class="mat-tree" [dataSource]="dataSource" [treeControl]="treeControl"gt; lt;mat-nested-tree-node class="mat-nested" *matTreeNodeDef="let node"gt; lt;ligt; lt;div class="mat-tree-node colored__locobuzz "gt; amp;nbsp;{{node.item}}lt;/divgt; lt;/ligt; lt;/mat-nested-tree-nodegt; lt;mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren"gt; lt;li class="tree-container"gt; lt;div class="mat-tree-node"gt; lt;button mat-icon-button matTreeNodeToggle [matTreeNodeToggleRecursive]="recursive" [attr.aria-label]="'toggle ' node.filename"gt; lt;mat-icon class="material-icons-outlined"gt; {{treeControl.isExpanded(node) ? 'add_box' : 'add_box'}} lt;/mat-icongt; lt;/buttongt; lt;span class="treeItem" mat-button (click)="drawer.toggle()"gt;{{node.item}}lt;/spangt; lt;/divgt; lt;ul class="tree-nested-node"gt; lt;div *ngIf="treeControl.isExpanded(node)"gt; lt;ng-container matTreeNodeOutletgt;lt;/ng-containergt; lt;/divgt; lt;/ulgt; lt;/ligt; lt;/mat-nested-tree-nodegt; lt;/mat-treegt;