This is a migrated thread and some comments may be shown as answers.

Treeview in PanelBarItem - Using code behind

3 Answers 23 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Lasse
Top achievements
Rank 1
Lasse asked on 14 Jan 2012, 02:08 AM
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}


3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Jan 2012, 10:08 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Lasse
Top achievements
Rank 1
answered on 16 Jan 2012, 02:13 PM
I tried that, but it is not enough - the TreeViewItems are still "jumping around" when I hover the mouse over them...
0
Dimo
Telerik team
answered on 16 Jan 2012, 04:08 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
Tags
PanelBar
Asked by
Lasse
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Lasse
Top achievements
Rank 1
Share this question
or