TreeView color on hover and select

[Andy Richard]

I'm trying to change the color of the treeview items. I was able to change the background colors but two issues remain:

1. On hover and also on select, there is a small area to the left of the menu item that remains white.

2. The text of the item turns red when I hover over the selected item, but it should turn white.

This is what I have so far:

    .e-treeview .e-list-item.e-hover > .e-text-content {

        background-color: #404055;

    }

        .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {

            color: #FFFFFF;

        }

.e-treeview .e-list-item > .e-text-content .e-list-text {

    color: #E4E4E7;

}

.e-treeview .e-list-item.e-active > .e-text-content {

    background-color: #6414DB;

}

.e-treeview .e-list-item.e-active > .e-text-content .e-list-text {

    color: #FFFFFF;

}

.e-treeview .e-level-1, .e-treeview .e-level-2, .e-treeview .e-level-3 {

    background-color: #333E53;

}

.e-treeview .e-fullrow {

    background-color: #333E53;

}

[Sharon Sanchez Selvaraj]

Hi Andy, 

 

Thanks for contacting Syncfusion support. 

 

We have checked with your requirements and modified the styles based on your requirement. 

 

Please find the sample attached here for your reference. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeView33706391.zip 

 

Please, refer the below links for more details on TreeView component.  

  

UG Documentation- https://blazor.syncfusion.com/documentation/treeview/getting-started/ 

  

Demo link- https://ej2.syncfusion.com/demos/#/material/treeview/default.html 

 

Please get back to us if you need any further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[Andy Richard]

Thank you for your help. It's very close, except I had to add the following to make the whole item highlight on hover:

    .e-treeview .e-list-item.e-hover > .e-text-content {

        background-color: #404055;

    }

That works. Thank you.

[Keerthana Rajendran]

Hi Andy, 

 

Most Welcome. We are glad to hear that the issue has been resolved. Please get back to us if you need any technical assistance. 

 

Regards, 

Keerthana.