+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Styling the TreeView navigation control

Styling the TreeView navigation control

4 posts, 0 answered
  1. Scott MacDonald
    Scott MacDonald avatar
    29 posts
    Registered:
    08 Mar 2006
    16 Apr 2013
    Link to this post
    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
  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    18 Apr 2013
    Link to this post
    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


    Regards,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Scott MacDonald
    Scott MacDonald avatar
    29 posts
    Registered:
    08 Mar 2006
    18 Apr 2013 in reply to Jen Peleva
    Link to this post
    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





  4. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    23 Apr 2013
    Link to this post
    Hello Scott,

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

    Regards,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
4 posts, 0 answered