Style the node connecting links.

4 posts, 0 answers
  1. Lovella Bacaud
    Lovella Bacaud avatar
    20 posts
    Member since:
    Apr 2013

    Posted 16 Jul 2013 Link to this post

    Hi

    I want to add arrows to the end of lines connecting the nodes and make it more thick. How can I do the same using CSS?

    Thanks
    Lovella.
  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2013 Link to this post

    Hi Lovella,

    Try overriding the default CSS as follows.

    CSS:
    <style type="text/css">
        .rocLineUp:after
        {
            content: "";
            width: 9px;
            height: 5px;
            background: url("../Images/downarrow.png") no-repeat center center;
            position: absolute;
            bottom: 0;
            left: -4px;
        }
        html .RadOrgChart .rocLineUp
        {
            border: 0.5px solid black !important;
        }
             
        html .RadOrgChart .rocLineDown
        {
            border: 0.5px solid black !important;
        }
        html .RadOrgChart .rocLineHorizontal
        {
            border: 0.5px solid black !important;
        }
    </style>

    Thanks,
    Princy.
  5. Lovella Bacaud
    Lovella Bacaud avatar
    20 posts
    Member since:
    Apr 2013

    Posted 17 Jul 2013 Link to this post

    Hi Princy thanks but the icon is not properly shown, only some portion is displayed.
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2013 Link to this post

    Hi Lovella,

    In the .rocLineUp:after CSS class, set the height property to a higher value such as height: 15px; .

    Thanks,
    Princy.
  8.
Back to Top