Style error when too many children

[gaoryrt]

Style error when too many children

[gaoryrt]

So efficient, thank you!

[andrico1234]

Interesting! Thanks for bringing this up! does translate(-105%) work for all use cases, or just your specific width?

It looks like this issue is the same as this one: #62

Regardless, I'll see what I can come up with after doing some digging

Can you share a repo that I can fork to view this issue, or create a codesandbox?

Also, I like the look of this skill tree! Can't wait to see it when it's done.

[gaoryrt]

Seems the extra percents in translate(-105%) is made for adjusting the horizontal line, but why 5% instead of 3%?

I think I can reproduce this error in any case, the more children a node have, the larger gap it shows.

You can find the repo here.

[andrico1234]

I think i've found the fix. Instead of manually changing the width, I simply flip the element over using scale(-1) and add a translateX(-3px) to offset the center of the vertical line it connects to.

This works for nodes with long widths.

I'll see if this fixes the issue you're having when there are lots of children.

[andrico1234]

It looks like this change also fixes your tree!

I copied the structure within the test app!

[andrico1234]

Fixed in: #69

[andrico1234]

Released with 1.6.2

[andrico1234]

Let me know if your tree makes it live, and I can add it to the showcase 😁