cssangularprimengboost-propertytree

Need to draw vertical lines in expand/collapse in p-tree

I am using p-tree from prime-ng, and need to draw the vertical lines(Highlighted with red pen) via css like this:

enter image description here

I have done the rest part and working fine, only vertical lines need to draw. My Implementation is looking something like below:

enter image description here

I just need to draw vertical lines below + and - icons. Kindly Help!

Solution

  • You can do it by adding the following style:

    ::ng-deep .p-tree .p-treenode-children .p-treenode {
  border-left: 1px dashed black;
}

    It might require some tinkering if you made some changes to the styling, maybe add margin-left to move the border a bit.

    You can see a demo here.