Reduce left indent of radTreeView nodes?

8 posts, 0 answers
  1. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 08 Dec 2012 Link to this post

    Hi, I really hate to have to keeping asking all these questions but I'm spinning my wheels on a treeview formatting issue.

    How do you move the treenodes indent to the left closer to the black border (see attachment)? I've tried playing with the ul class and setting margin-left to 0px but with no effect.

    I have the following css to hide the +/- expand icon, so it seems the space used by these images still remains.  I want  move everything left where they used to appear since I don't need them.

    <style type="text/css">
        .RadTreeView_Default .rtPlus,
        .RadTreeView_Default .rtMinus
        {
            display: none!important;
        }
    </style


    Thanks again, Dave.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2012 Link to this post

    Hi David,

    Try overriding the default CSS as follows to achieve your scenario.

    CSS:
    <style type="text/css">
        .RadTreeView .rtUL .rtLI .rtUL
        {
            padding-left: 0px !important;
            margin-left: 0px !important;
        }
        .RadTreeView .rtTop, .RadTreeView .rtMid, .RadTreeView .rtBot
        {
            padding-left: 0px !important;
        }
    </style>

    Hope this helps.

    Regards,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 10 Dec 2012 Link to this post

    Thanks for the reply.  I should have been more clear...I want move everything left once the +/- is removed but still keep the hierarchy.  The css you provided lists all the checkboxes along the left side.

  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2012 Link to this post

    Hi David,

    Please try the following CSS.

    CSS:
    <style type="text/css">
        .RadTreeView .rtTop, .RadTreeView .rtMid, .RadTreeView .rtBot
        {
            padding-left: 0px !important;
        }
    </style>

    Hope this helps.

    Regards,
    Shinu.
  6. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 11 Dec 2012 Link to this post

    Thanks! that seemed to work.  Dave.
  7. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 23 Jan 2013 Link to this post

    Hi, I have a follow-up.  Can I take this further and reduce the child nodes some more? I attached a sample of what I have now vs how I'd like to further reduce indentation of the checkboxes nodes.  Thanks, Dave.

  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Jan 2013 Link to this post

    Hi David,

    Try the following CSS to achieve your scenario.

    CSS:
    <style type="text/css">
        .RadTreeView .rtUL .rtLI .rtUL
        {
            padding-left: 10px !important;
        }
    </style>

    Hope this helps.

    Regards,
    Shinu.
  9. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 24 Jan 2013 Link to this post

    Thanks! just what I was looking for!  Dave.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017