Change some css styles on TreeView

[Eduardo]

Hi,

I've been trying to customize a css for the TreeView and I haven't been able to find the right class to change, or maybe I found but I don't know exactly which property to change. I'm not an expert on css.

Here what I'd like to change:
- Shorten the right margin of the plus/minus sign, so the text is closer to it, I tried
        .RadTreeView_NOutlook .rtPlus,
        .RadTreeView_NOutlook .rtMinus
        {
            background-image: url('TreeView/PlusMinus.png');
            margin-right: 1px;
        }
- Make the height of the node text smaller, so the nodes appear closer to each other. Here I had two problems, the first I couldn't make the height smaller and the second I couldn't make the box of the selected and highlight with no padding. I tried things like
        .RadTreeView_NOutlook .rtIn
        {
            padding: 0;
        }
- I was successful to change the indentation of the internal nodes, but I'm not sure it is the best way to do it, here it is what I did
        .RadTreeView_NOutlook .rtLI
        {
            margin-left: -1.9em;
        }
        .RadTreeView_NOutlook .rtSp
        {
            padding-left: 1.9em;
        }

Thanks,
Eduardo

[Yana]

Hello Eduardo,

You should modify the images used for lines in order to reduce the height of RadTreeView nodes, could you please tell us the needed height?

The following css styles will make the box of the selected and highlightet nodes with no padding:

.RadTreeView .rtIn {
 padding: 0 !important;
}

Best wishes,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Eduardo]

Hi Yana,

Are those images you mentioned the ItemHoveredBg and ItemSelectedBg? I'll try to play with that and let you know if it worked.

Thanks,
Eduardo

[Yana]

Hello Eduardo,

Here are the other styles where you should reduce the height:

.RadTreeView .rtSp {
   height: 14px !important;
}

.RadTreeView,
.RadTreeView_Default a.rtIn,
.RadTreeView_Default .rtEdit .rtIn input {
  line-height: 14px !important;
}

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Eduardo]

Hi Yana,

I tried that and it didn't look very nice. The plus/minus sign didn't align with the node. However, I used

        .RadTreeView_NOutlook .rtLI .rtTop,
        .RadTreeView_NOutlook .rtLI .rtMid,
        .RadTreeView_NOutlook .rtLI .rtBot {
            height:15px !important;
        }

and it showed in a nice way, the only problem was that then I had to add a padding bottom on the container of the treeview (a PanelBar template).

I still can't make the right margin of the plus/minus sign to be smaller. I tried

        .RadTreeView_NOutlook .rtMinus,
        .RadTreeView_NOutlook .rtPlus
        {
            margin-right: 1px !important;
        }

and had no change.

Thanks,
Eduardo

[Eduardo]

One more thing I just noticed. The margin-right on the plus/minus works on Firefox, but unfortunately our main platform is Internet Explorer and on this it doesn't work. :(

Thanks,
Eduardo

[Yana]

Hi Eduardo,

Please add the following css style:

.RadTreeView .rtIn {
   margin-left: 0px !important;
}

you can also try to decrease the left-padding of "rtIn" but this will affect the hovered and selected styles.

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.