Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vishwajeetraj11 opened this issue Dec 21, 2023 · 5 comments · May be fixed by #27
Open

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

vishwajeetraj11 opened this issue Dec 21, 2023 · 5 comments · May be fixed by #27
Labels
good first issue Good for newcomers

Comments

@vishwajeetraj11
Copy link
Owner

No description provided.

@vishwajeetraj11 vishwajeetraj11 added the good first issue Good for newcomers label Dec 21, 2023
@eyob-muktar
Copy link

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

@vishwajeetraj11
Copy link
Owner Author

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

@eyob-muktar
Copy link

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.

@vishwajeetraj11
Copy link
Owner Author

Trying adding background color transparent.

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

@eyob-muktar eyob-muktar linked a pull request Dec 22, 2023 that will close this issue
@vishwajeetraj11
Copy link
Owner Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants