4

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?

BlueBird
  • 1,406
  • 4
  • 24
  • 35
  • 2
    Use developer tools to inspect the element (in specific look at computed styles) and find the style that applies – Tomer May 02 '13 at 13:22

3 Answers3

3

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;
}
BlueBird
  • 1,406
  • 4
  • 24
  • 35
  • @Nick I had to use the inspector in chrome to figure out which styles to remove, in my scenario there was about a dozen properties that I had to override over 3 different selectors. – The Muffin Man Aug 15 '13 at 17:10
  • Ideally, it would be nice to flag an option in the kendo control to disable the hover state instead of having to write an addition override to counter the kendo toggle. – beauXjames Nov 11 '13 at 23:44
2

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.

DaleyKD
  • 417
  • 1
  • 4
  • 18
0

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

Silviya
  • 30
  • 4