search

lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
915 stars 72 forks source link

custom styling causing drag between line in incorrect position #338

Open kherP opened 5 months ago

kherP commented 5 months ago

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

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):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

kherP commented 5 months ago

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

lukasbach commented 5 months ago

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.

AustinMKerr commented 3 months ago

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

lukasbach commented 3 months ago

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.