react-organizational-chart icon indicating copy to clipboard operation
react-organizational-chart copied to clipboard

Dynamically adjust padding of child node/parent node

Open kiran-pillai opened this issue 2 years ago • 1 comments

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 avatar Nov 29 '22 00:11 kiran-pillai

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

kiran-pillai avatar Nov 29 '22 00:11 kiran-pillai