How to adjust Metro Touch skin for TreeView

[Tomica]

I have been trying to make a few simple modifications to a TreeView with the new touch skin.

I see where spacing is larger to account for fingers rather than mouse tip, but the horizontal indents for a three-level node expansion are excessive for my applications. Bear in mind it is the width of the indent that I am concerned about, otherwise the skin works extremely well on my iPad, Android tablet and Windows Phone. (Yeah Telerik!)

Per the demos, I have applied custom CSS to the nodes. Using a text-indent value of -16px does the trick for the text.

However the hot-spot does not move.

I am thinking there must be some pre-defined override that I can apply, similar to a customization provided elsewhere for RadGrid, as below. Can anyone point me in the right direction? And what property would affect the hot-spot?

 

<style type="text/css">
 div.RadGrid .rgPager .rgAdvPart
 {
  display:none;
 }

[Ivan Zhekov]

Hi, Thomas.

The metro skin is a bit different than the rest of the controls in terms how we applied the styling, so you are going to need !important e.g.:

.RadTreeView_MetroTouch .rtPlus,
.RadTreeView_MetroTouch .rtMinus {
    margin-left: -16px !important;
}

.RadTreeView_MetroTouch .rtTop,
.RadTreeView_MetroTouch .rtMid,
.RadTreeView_MetroTouch .rtBot {
    padding-left: 16px !important;
}

The above rule is for the expand collapse icons and the bottom is for the general indent.

Kind regards,
Ivan Zhekov
the Telerik team