Treeview in PanelBarItem - Using code behind

[Lasse]

Hi there,

I am building a PanelBar with a TreeView inside each PanelBarItem, using code behind in a custom class.

It all works fine, except when I set the Url property for a TreeViewItem, css styles of the TreeView seem to mess up (both in IE8 and FF6) - see attached image.

I can see that in your telerik.common.min.css, the style below is responsible for the wide left margin, however it does not account for the rest of the messed up layout - am I doing something wrong, or is this a "css bug"?

.t-panelbar .t-group .t-group .t-link{padding-left:2em}

[Dimo]

Hello Mikkel,

The common CSS code does not support all possible nesting scenarios, because this will increase the stylesheet size too much with no real benefit for the majority of developers. In your case, please add the following rule to override the padding for the TreeView items:

.t-panelbar .t-group .t-group .t-treeview .t-link{padding-left:0}

Regards,
Dimo
the Telerik team

[Lasse]

I tried that, but it is not enough - the TreeViewItems are still "jumping around" when I hover the mouse over them...

[Dimo]

Hello MIkkel,

You should adjust (reenforce)  the hover / selected states in a similar fashion. Please use the following code instead of the one provided before.

.t-panelbar .t-group .t-group .t-treeview .t-in
{
    padding: 2px 4px 2px 3px;
}

.t-panelbar .t-group .t-group .t-treeview .t-state-hover,
.t-panelbar .t-group .t-group .t-treeview .t-state-selected
{
    border-style: solid;
    border-width: 1px;
    padding: 1px 3px 1px 2px;
}

All the best,
Dimo
the Telerik team