search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.1k stars 2.52k forks source link

MaterialUI's table keeps shrinking while dragging #2008

Open delucca opened 3 years ago

delucca commented 3 years ago

Hi!

I'm trying to setup my project using react-beautiful-dnd to create a drag/drop experience in a MaterialUI table.

Here is the code of my table body (so far): https://github.com/delucca/execution-mode/blob/366bbcbbf917b299f91b44519dbef93f186ab8fe/src/components/KeyResult/Table/Body/Component.tsx

It is working as expected, but as soon as I drag a row, the entire row collapses (instead of keep being full width), creating a pretty bad UX.

Anyone knows how to fix it?

radarxc commented 3 years ago

https://stackoverflow.com/questions/27953892/positionabsolute-fixed-changes-display-property-to-block

position:fixed and position:absolute will make display style change to 'block'.

You may follow this link to resolve the issue: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/tables.md