Adjusting margin between nodes

4 posts, 0 answers
  1. Mark Callan
    Mark Callan avatar
    10 posts
    Member since:
    Oct 2005

    Posted 12 Aug 2014 Link to this post

    I am following the instructions for altering the node size located here http://www.telerik.com/help/aspnet-ajax/orgchart-node-size.html

    I am using templates so I am referencing the .rocItemTemplate class to adjust the width of the items using the classes below.  The problem I encounter is the distance or margin between the nodes on this level does not change is very large.  I am having trouble finding the right CSS class to reference in order to bring the nodes closer together.  Can someone point me to the right CSS class and margin setting which should bring them closer together?

    .DivisionNodeSize
    {
      width: 100px !important;
      height: 90px !important;
    }
     
    .DivisionNodeSize .rocItemTemplate
    {
     width: 80px !important;
    height: 75px !important;
    }
  2. Mark Callan
    Mark Callan avatar
    10 posts
    Member since:
    Oct 2005

    Posted 13 Aug 2014 in reply to Mark Callan Link to this post

    Just an update.  I have no problems in IE 8 but in Chrome 35 all of the node items spread out and go beyond the width of the page.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 14 Aug 2014 Link to this post

    Hello Mark,

    We have created a sample project with applying the styles that you had provided and it seems fine in Chrome as well. We are sending you this video as a part of the testing. Please, find the sample project in the attachment.

    We have noticed that you had opened a similar support ticket. In order to avoid duplication of the threads, please continue the conversation only in one of them. Thank you for your understanding.

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Mark Callan
    Mark Callan avatar
    10 posts
    Member since:
    Oct 2005

    Posted 19 Aug 2014 Link to this post

    So after working with Magdalena on this we found two particular CSS entries which can help people fit their Rad Org Chart into a fixed width area.  For my Org Chart this will work as we will only have 6 nodes at Level 2.  This allowed me to contain the org chart into a 980px fixed width div.  If a 7th node is added then the Org Chart will break out of the container or wrap the item below.  

    .rocNode .rocNode{
        width: 140px !important;
    }
     
    html .RadOrgChart .rocItem{
        max-width: 140px !important;
    }


    Keep in mind that all of my template css entries at level 2 are below 140px in width.  I hope this helps others.  
Back to Top