CODEWITHSUNDEEP
cssangularangular-materialangular6
Learning is a mess
Learning is a mess

Reputation: 8277

Reducing line height in angular material tree

I am using a angular tree material to display JSON data, I am unsatisfied by the amount of white spacing there is between lines. I have tried playing with mat-tree-node.line-height in the css with zero changes. How can I reduce all this vertical white space?

enter image description here

Upvotes: 7

Views: 8232

Answers (3)

Ania
Ania

Reputation: 291

mat-tree-node {
    max-height: 16px
}

for Angular 16

Upvotes: 0

Pipo
Pipo

Reputation: 5073

The only working way I found with angular 8 on a nested element (and nested tree) is

.mat-tree-node {
  min-height: 1.2em !important;
  height: 1.2em;
}

Upvotes: 8

Alexandre Annic
Alexandre Annic

Reputation: 10738

Simply by overriding their css:

.mat-tree-node { min-height: 30px }

Upvotes: 14

Related Questions