We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Treeview row height Angular 7+, TypeScript3+


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;

.e-treeview .e-text-content {
  height: 24px;
  padding: 0;

.e-treeview .e-fullrow {
  height: 24px;

.e-treeview .e-list-item {
  padding: 0;


Laurens Albers

1 Reply

CI Christopher Issac Sunder K Syncfusion Team January 25, 2019 12:34 PM UTC

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. 


Live Chat Icon For mobile
Up arrow icon