search

hello-pangea / dnd

💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!
https://dnd.hellopangea.com
Other
2.31k stars 91 forks source link

Support gap used between the draggables in flexbox #432

Open Darhagonable opened 1 year ago

Darhagonable commented 1 year ago

Expected behavior

When using gap, with flex it should work properly and similar to margin property.

Actual behavior

When dragging the placeholder is too small and when dropping it lands slightly off place and then snaps back to its correct position.

Demo

https://codesandbox.io/s/vertical-list-with-flex-gap-mt4ugc?file=/src/App.tsx

100terres commented 1 year ago

Hi @Darhagonable :wave:

Thank you for opening this ticket!

Could you properly document the issue in the description of this ticket to avoid back and forth between @hello-pangea/dnd and react-beautiful-dnd repos.

Darhagonable commented 1 year ago

@100terres I have updated the OP and added a codesandbox of the issue

hichemfantar commented 1 year ago

This a much needed bug fix. Gap support is very much needed as it's supported by all major browsers. Can we get some movement on this?

mguzm4n commented 1 year ago

Uhm, I think gap is not working yet isn't it? - Added a thumb up.

rick-25 commented 1 year ago

Yep, it's still not working

hichemfantar commented 1 year ago

For now, It's a simple fix with margin bottom on each element.

jwu-ice commented 7 months ago

It's simple fix with margin bottom and last-child: margin bottom: 0 but same problem with drag and drop last child position

korneef commented 6 months ago

Yes, it has a problem if I need to use another margin for last-child component. Or different margin for any component of list. But it's more actual for last/first-child