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

Custom styling placeholder #2176

Open
denys-kutsil opened this issue Apr 9, 2021 · 2 comments
Open

Custom styling placeholder #2176

denys-kutsil opened this issue Apr 9, 2021 · 2 comments

Comments

@denys-kutsil
Copy link

Screen Shot 2021-04-09 at 4 33 49 PM

Can you add the opportunity to put something in an empty place when we use react-window FixedSizeList

@2stash
Copy link
Contributor

2stash commented Apr 19, 2021

@denyk443245235 Hi! Just to get the conversation going I am posting a demo. It doesn't work great, but should convey the idea. Basically make the droppable containers hold a Single Item, and they either display the one real item or a fake one to hold the place. This might work well since you have a fixed size list, so you could have a list of length 5, so 5 droppable areas that are wrapped in a larger container.

A note with the demo, best way to use it is to drag task-1 or task-5 into the task-100 Empty Tasks. I think with styling it could be made to look good, some thoughts on improvements:1) placeholder could be made not draggable so it doesn't move, 2)use conditional color so placeholder is highlighted,3) instead of rendering fake data make a whole new container that is empty but styled nicely, I think 3rd option would work the best instead of injecting a fake placeholder.

https://codesandbox.io/s/react-beautiful-dnd-leave-placeholder-3dd2t?file=/src/index.js
react-beautiful-dnd placeholders

@TowhidKashem
Copy link

There are some solutions on this thread #518

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants