osresume icon indicating copy to clipboard operation
osresume copied to clipboard

Published 20 hours ago • verified publisher icon vishwajeetraj11

Use react-dnd kit instead of react-beautiful-dnd

Open vishwajeetraj11 opened this issue 1 year ago • 5 comments

vishwajeetraj11 avatar Dec 21 '23 11:12 vishwajeetraj11

Hey @vishwajeetraj11, I was working on this issue but ran into another issue for which I couldn't find a solution. The issue is the react-dnd preview is not rendered correctly in Chrome because of the drawer at the bottom. The drag preview adds a white space the size of the drawer. It works fine in Firefox. Chrome Screenshot from 2023-12-22 14-56-14

Firefox Screenshot from 2023-12-22 14-55-46

If you happen to know a workaround for this, let me know

eyob-muktar avatar Dec 22 '23 11:12 eyob-muktar

Hey @eyob-muktar , i recommend checking for margin-bottom or padding bottom for that element.

vishwajeetraj11 avatar Dec 22 '23 12:12 vishwajeetraj11

I checked the margin, and that's not the issue. Drag preview takes the maximum possible size of the div which includes the bottom drawer, but because the drawer is not open, it replaces it with a white background.

eyob-muktar avatar Dec 22 '23 13:12 eyob-muktar

Trying adding background color transparent.

Please raise PR. I'll need to take a look.

vishwajeetraj11 avatar Dec 22 '23 13:12 vishwajeetraj11

Hey @eyob-muktar, the library is accounting for 60px of extra space because of this code (EducationCard.js line no. 23).

style={{ maxHeight: `${educationActive[id] ? '60px' : '0px'}`, transition: 'all 0.5s', overflow: 'hidden' }}

See if there is a work around.

vishwajeetraj11 avatar Dec 23 '23 13:12 vishwajeetraj11