[experimental] Multiple sortable lists shows unexpected behavior after simple CSS modification
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
I dabbled around with the example for multiple sortable lists (React), based upon the example given for the step "Moving items between columns".
After some CSS modifications the drag and drop started showing unexpected behavior, which i tracked back to the pointed where i simply changed the min height property of the columns (doubling it's value). now, dragging the b0 item down leaves an empty space at the top of the b-column and move there after ending the drag. similar things happen from time to time if i drag the a2 item to the right under the b1 item.
Here's the link to the sandbox, with only the single modification to the min height property.
https://codesandbox.io/p/devbox/mystifying-wave-qnhjcg?workspaceId=ws_cPfHtYgJXybxq2c4o86PW
Other than that, amazing work!
Contributor guide
Research direction
Start by opening the linked CodeSandbox and reproducing the multiple sortable lists example with the doubled column min-height. Compare dragging b0 and a2 before and after the CSS change; done means the lists retain the expected item positions without empty spaces or unexpected moves.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100