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

Droppable: unsupported nested scroll container detected #559

Open
section14 opened this issue May 17, 2023 · 3 comments
Open

Droppable: unsupported nested scroll container detected #559

section14 opened this issue May 17, 2023 · 3 comments

Comments

@section14
Copy link

I have a modal window in my project that features a drag-n-drop based component. It's basically a long list of items that can be re-ordered. The body of the modal window has max-height: some-number with overflow-y: auto which introduces a scroll bar when the content gets too long.

I receive this warning in the browser console:

Droppable: unsupported nested scroll container detected.
A Droppable can only have one scroll parent (which can be itself)
Nested scroll containers are currently not supported.

We hope to support nested scroll containers soon: 

https://github.com/atlassian/react-beautiful-dnd/issues/131

The thing is, it works just fine. I can drag an item from the top to somewhere near the bottom (or vice-versa), and everything seems to work. The scrollbar works along with it. It scrolls while I'm dragging.

So, maybe this warning can be removed? I'm not sure what part is "unsupported", but I'm not having any obvious issues. Also, this message clearly stems from the original repo, so maybe it's been fixed by this project?

@patorjk
Copy link

patorjk commented Aug 10, 2023

I'm noticing the same issue. I was able to fix it the first time I found it by adding an "overflow:hidden" CSS prop to one of the parents. However, later I needed a draggable list inside of a panel that had a scrollbar. 2 nested scroll containers. The warning re-appeared. However, everything seems to work fine so I'm not sure why the message is appearing.

The original issue this warning points to says only 1 scroll container is supported. I wonder if at some point this was fixed? Maybe problems only occur in certain situations or with certain browsers?

@aryanandarnav13
Copy link

aryanandarnav13 commented Aug 10, 2023

I'm also facing same type of issue. I'm building a trello like app and using react-beautiful-dnd.
It has a board with horizontal scroll and horizontal drag and drop + in each column there is vertical scroll and vertical drag and drop.
The horizontal one is working perfectly, but the vertical one is creating problem. I'm not able to drag n drop in vertical scroll properly.
If you find or get any solution. Please let me know too.

@patorjk

@BackstageGit
Copy link

Any update on this

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

No branches or pull requests

4 participants