CODEWITHSUNDEEP
csskendo-uikendo-treeview
BlueBird
BlueBird

Reputation: 1466

Remove Hover Styling on Kendo Treeview

I am trying to remove the hover styling on the kendoui treeview component so that when you hover over an item in the treeview it does not have a border / background image etc. I have gotten rid of everything but the border as it looks like there are additional styles that are at play that I cannot seem to locate. Here is my css so far... (in addition to the default theme)

  .k-treeview .k-in.k-state-hover{
    background-image:none;
    background-color:#fff;border:none;


}

.k-treeview .k-in.k-state-selected{
    background-image:none;
    background-color:#fff;color:#000;border:none;}

Currently it is just showing a border which looks to be black as opposed to the grey one that was there before I added the styles above... Any idea what I can do to get rid of this stubborn border?

Upvotes: 4

Views: 8836

Answers (3)

Silviya
Silviya

Reputation: 30

In my case this helped:

.k-window-action .k-state-hover {
    border: none;
    background: none;
}

P.S.: "border-color: transparent" caused slight move on hover

Upvotes: 0

DaleyKD
DaleyKD

Reputation: 427

Coupled with the use of .k-state-disabled, it appears I might have found a slightly better CSS solution.

The nodes don't move at all, and it appears completely disabled.

.k-treeview .k-in.k-state-hover,
.k-treeview .k-in.k-state-focused,
.k-treeview .k-in.k-state-selected {
    border-color:transparent;
    background-color:transparent;
}

I've also added some JavaScript to prevent the expanding of the nodes, and disabling of the checkboxes.

Upvotes: 2

BlueBird
BlueBird

Reputation: 1466

With the addition of this style embedded on the page I was able to get it to do what I wanted. I believe this was partially related to how the css was being loaded (order) in multiple different sharepoint webparts on the same page...

.k-treeview .k-in.k-state-hover, .k-treeview .k-in.k-state-selected {
    border-style: none;
    border-width: 0;
    padding: 2px 4px 2px 3px;
}

Upvotes: 3

Related Questions