dnd
dnd copied to clipboard
Droppable: unsupported nested scroll container detected
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?
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?
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
Any update on this