Treeview row height Angular 7+, TypeScript3+

[Laurens Albers]

Hi,

The treeview nodes(with checkbox) have too much whitespace between them. For my situation they need to be much more closer to each other. So basically, the height is too high.

Can you tell me what i am missing? OR do you have an example code with the right classes I should edit?

I have tried the following:

.e-treeview .e-list-text {

  font-size: 12px;

  line-height:24px;

}

.e-treeview .e-text-content {

  height: 24px;

  padding: 0;

}

.e-treeview .e-fullrow {

  height: 24px;

}

.e-treeview .e-list-item {

  padding: 0;

}

greetings,

Laurens Albers

[Christopher Issac Sunder K]

Hi Laurens, 

Thank you for contacting Syncfusion support. 

You can achieve your requirement by adding cssClass to your TreeView component and customizing the css for the below classes, 

.custom .e-list-item .e-text-content.e-icon-wrapper { 

    margin-bottom: 0px; 

} 

 

.custom .e-list-item .e-text-content { 

    margin-bottom: -4px; 

    padding: 0px; 

} 

 

.custom .e-list-parent.e-ul { 

    margin: 0px; 

    padding-left: 40px; 

} 

We have prepared a sample for your reference.
Sample: https://stackblitz.com/edit/angular-kttxnb-5y4rg2?file=check-box.html  

Please check it and let us know if you have any more concerns. 

Thanks, 

Christo