1. Home
  2. Forum
  3. Blazor
  4. TreeView color on hover and select

TreeView color on hover and select

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;
}


3 Replies 1 reply marked as answer
SS Sharon Sanchez Selvaraj Syncfusion Team February 3, 2021 07:22 AM UTC

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. 
 
 
Please, refer the below links for more details on TreeView component.  
  
  
 
Please get back to us if you need any further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


Marked as answer
AR Andy Richard February 3, 2021 02:19 PM UTC

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.

KR Keerthana Rajendran Syncfusion Team February 4, 2021 05:02 AM UTC

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. 


Loader.
Up arrow icon