Margin left on sortable items behaves strangely
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
Hello !
I'm doing the migration but the new version doesn't handle properly `margin-left` on the dragged items (when using useSortable at least)
Repro: https://codesandbox.io/p/sandbox/dnd-kit-sandbox-forked-nz4y85?file=%2Fsrc%2FApp.tsx%3A16%2C33 (from a doc example, I just added `style={{ marginLeft: 20 }}`)
In this example obviously you could use a padding on the parent, but in my usecase we have multiple items in the column which are not all aligned, so some of them have a left margin
Contributor guide
Research direction
Start with the linked CodeSandbox reproduction at src/App.tsx around lines 16–33 and compare the sortable behavior with and without the marginLeft style. Trace how useSortable handles the dragged item’s positioning, then verify that items with different left margins remain correctly aligned while dragging.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 62/100