Styling the TreeView navigation control

Hello,

I'm trying to style a side navigation that is in the treeview format and am having a problem with the dropdown arrow not being aligned with the node. The arrow is higher than the node text is, is there a way I can adjust that? Whenever I apply some padding to the class that looks to be affecting it, the default css sprite seems to break and show both the right arrow and the down arrow. Attached is an example of the placement of the arrow.

Any help would greatly be appreciated.

Thanks,

Scott

Hello Scott,

I've already responded in the support ticket. However, I'm going to post my response here, as well, for your convenience:

The Treeview mode of our navigation is based on RadTreeView. This means that it has teh same selectors and the same html structure as the RadControl. I would advise you to go over this documentation about styling the RadTreeView. Here is the article about all css classes, which are set to the TreeView and their purpose:

http://www.telerik.com/help/aspnet-ajax/treeview-appearance-css-selectors.html

You can also check the demo for a styled sample, here:

http://demos.telerik.com/aspnet-ajax/treeview/examples/overview/defaultcs.aspx

Thanks Jen,

I finally figured out how to adjust the arrow positioning with the CSS "position" statement:

.RadTreeView_GC .rtPlus, .RadTreeView_GC .rtMinus

    background-image:url('images/PlusMinus.png');
    position:relative;
    top:20px;
    left:5px;


This let me position it exactly where I wanted it.

Scott

Hello Scott,

 I'm happy to hear you were able to find a solution.