Angular Material Tree nested node depth

Question

I am trying to work with angular and material components. And I have two questions:

1) How to reduce nested node depth(left offset) ? Please, see screenshot

2) I apply next style for change max-height:

.mat-tree-node { 
  min-height: 25px;
  max-height: 25px; 
}

And now when I press to expand button, gray circle is drawn incorrectly. How can i fix it(change it radius)? Please, see screenshot

Amir Fawzy · Accepted Answer · 2018-11-09 16:05:51Z

1

to reduce left offset you can do so by css take a look stackblitz

to make ripple effect work properly and because you change the min-height and max-height of their grandparent .mat-tree-node do so

.mat-tree-node > .mat-icon-button {
  width: 25px;
  height: 25px;
  line-height: 25px;
}

answered Nov 9, 2018 at 8:07

Amir Fawzy

4775 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

The second question is resolved, thank you! But the first one is still not work. Screenshot: image.ibb.co/ifvhvA/padding.png

Unfortunately it did not help(

i just added stackblitz to show you how to solve "reduce left offset problem"