daniel-hauser / react-organizational-chart

Simple react hierarchy tree - any React children accepted for nodes
https://daniel-hauser.github.io/react-organizational-chart
MIT License
182 stars 36 forks source link

Dynamically adjust padding of child node/parent node #51

Open kiran-pillai opened 1 year ago

kiran-pillai commented 1 year ago

Is your feature request related to a problem? Please describe. I am using react-organizational-chart to render out a pdf version of my ui, hide it on the screen, take a screenshot of it using html-to-image and paste into a pdf using jspdf. The problem I've encountered is that sometimes too much padding is given to nodes making the tree much wider then it has to be. See the following ss below:

The bottom level nodes have wayyy to much padding-right and it makes the width of the block larger then it has to be, this stays true for all nodes in fact.

Describe the solution you'd like An additional prop that can be added to control how much padding-right a node has.

Describe alternatives you've considered I have tried to mess around with the padding directly on each element, but I think that flex box is handling the dynamic width adjustments for these elements so my attempts have been futile

Additional context Screen Shot 2022-11-28 at 7 20 33 PM

kiran-pillai commented 1 year ago

I see you can accomplish this using styled components... can we support to pass in classNames so we don't have to use styled components? Duplicate of this issue @yanalshoubaki @daniel-hauser