lukasbach/react-complex-tree

custom styling causing drag between line in incorrect position

kherP opened this issue · 4 comments

kherP commented

Describe the bug
A clear and concise description of what the bug is.

  • when rendering item using the renderItem props, the dragbetweenline component is off the position

To Reproduce
Steps to reproduce the behavior:

  1. render item using renderItem and add vertical padding to the component
  2. when drag one of the items over the nested list, see the dragbetweenline component is off position

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.
Screenshot 2024-02-16 at 4 09 07 PM

Desktop (please complete the following information):

  • OS: [e.g. iOS] macOs
  • Browser [e.g. chrome, safari] chrome
  • Version [e.g. 22] Version 120.0.6099.129 (Official Build) (arm64)

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

kherP commented

i'm currently using fixed position with some calculation to overcome this issue

It looks like the drag line just expands downward from the center between the items by the height of the line. If possible, you should be able to just move the line up with CSS by the fixed amount that the line has in height. For example, in the sample style, the line has a height of 4px, and is moved back up by css by 2px to recenter it.

I have the same issue essentially. my nodes don't have consistent height. and it seems to plot the spaces for them based on the hard coded height @--rct-item-height

this makes the drag and drop unstable very frustrating as I've put a lot of time setting this up for my use case and added the dynamically displayed elements as a last action I figured would be fast. but I was mistaken. my bad for not testing all functionality before moving forward. this is such a great library though!

image

Hi Austin, yes, RCT doesn't currently support elements of varying heights at the moment. Thank you very much for your contribution in the linked PR, I left some comments on your proposed changes.