Change some css styles on TreeView

7 posts, 0 answers
  1. Eduardo
    Eduardo avatar
    30 posts
    Member since:
    Feb 2009

    Posted 02 Jun 2009 Link to this post

    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
  2. Yana
    Admin
    Yana avatar
    4786 posts

    Posted 04 Jun 2009 Link to this post

    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.
  3. Eduardo
    Eduardo avatar
    30 posts
    Member since:
    Feb 2009

    Posted 04 Jun 2009 Link to this post

    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
  4. Yana
    Admin
    Yana avatar
    4786 posts

    Posted 04 Jun 2009 Link to this post

    Hello Eduardo,

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

    .RadTreeView .rtSp {  
       height14px !important;  
    }  
     
    .RadTreeView,   
    .RadTreeView_Default a.rtIn,   
    .RadTreeView_Default .rtEdit .rtIn input {  
      line-height14px !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.
  5. Eduardo
    Eduardo avatar
    30 posts
    Member since:
    Feb 2009

    Posted 04 Jun 2009 Link to this post

    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-right1px !important; 
            } 
     

    and had no change.

    Thanks,
    Eduardo


  6. Eduardo
    Eduardo avatar
    30 posts
    Member since:
    Feb 2009

    Posted 04 Jun 2009 Link to this post

    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
  7. Yana
    Admin
    Yana avatar
    4786 posts

    Posted 09 Jun 2009 Link to this post

    Hi Eduardo,

    Please add the following css style:

    .RadTreeView .rtIn {  
       margin-left0px !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.
Back to Top