How to autoscroll in DragDropContext (with multilist)?

[Steffi3rd]

I have around 10 columns as <Droppable />.

Expected behavior

The container of columns <Droppable /> has to auto scroll to the right when I reached right side of the window with my <Draggable />.

It works great within a <Droppable />: When I reach the bottom of the column <Droppable />, it auto scrolls to the bottom.

The idea is to do something like this : https://user-images.githubusercontent.com/2182637/36520670-57752526-17e6-11e8-95b3-b5a3978a5312.gif

Actual behavior

When I reached the right of the window or the container of Droppables, it's not auto scroll to the right.

But I see we can scroll manually by trackpad. (that's a good thing).

The problem is more important on iOS. I have to Drag and drop to the next column until I reach the last column (at right, at the end of the container).

Console Log

react-beautiful-dnd.esm.js:44 react-beautiful-dndDroppable: unsupported nested scroll container detected.A Droppable can only have one scroll parent (which can be itself)Nested scroll containers are currently not supported.

I guess is because each of my <Droppable /> is using "overflow: auto"

Suggested solution?

I don't know

What version of React are you using?

    "react": "^16.6.3"

What version of react-beautiful-dnd are you running?

    "react-beautiful-dnd": "12.1.1"

What browser are you using?

Chrome, Safari, Safari iOS

[joziahg]

Also have this issue. Its a limitation of rdb's current autoscroll implementation. More info on #131. I just removed the scroll containers on my lists for the time being.

[danieldelcore]

Hi @Steffi3rd,

Thanks for raising this issue. Can you please create a standalone example on codesandbox.io using our boilerplate: https://codesandbox.io/s/k260nyxq9v

Cheers 😄

[alexreardon]

Do you see any warnings in your console? I suspect you have multiple scroll containers which is not supported yet

[gregoryforel]

@Steffi3rd Hello! Have you been able to solve your issue? I am facing the same problem. Thanks!

[kaue-esparta]

Any idea?

[gregoryforel]

I read in other issues that this isn't possible. I'm switching to react-smooth-dnd.

[kaue-esparta]

This is crazy! in the Storybook has this example: https://react-beautiful-dnd.netlify.com/?path=/story/board--simple

It's works so great! Why in our situation doesn't? :S

[gregoryforel]

The storyboard example does not implement overflow on columns. You can also read above, @alexreardon confirms this isn't implemented.

See this example

See #344, they explain a bit better why.

[kaue-esparta]

@gregoryforel Thanks for your help!

[kaue-esparta]

I don't know if what i did solve this problem but, instead of set a <div style={{ 'overflow': auto }} /> after a Droppable tag, i set a div without overflow and a tag div with overflow, after Droppable tag, like this:

<Droppable droppableId={`${droppableId}`}>
 {droppableProvided => (
  <div ref={droppableProvided.innerRef} className={'body-item'}>
   <div className={'body-item-scrollable'}>
     {'Your <Draggable /> ...'}
    </div>
  </div>
 )}
</Droppable>

// Set overflow here -> remove DragDropContext auto-scroll (Pay attention)!
        .body-item {
          display: flex;
          width: 100%;
          height: 90%;
          align-items: center;
          flex-direction: column;
          justify-content: flex-start;

          @media (max-height: 900px) {
            height: 84%;
          }

          .body-item-scrollable {
            display: flex;
            overflow: auto;
            align-items: center;
            padding: 10px 15px 0;
            flex-direction: column;
          }
        }

Then works! :)

[Steffi3rd]

@kaue-esparta I'll try that solution. Thank man.

[gregoryforel]

@kaue-esparta I'm not sure I got it. Could you try in the codesandbox I posted please?

[shiwenyu]

I don't know if what i did solve this problem but, instead of set a <div style={{ 'overflow': auto }} /> after a Droppable tag, i set a div without overflow and a tag div with overflow, after Droppable tag, like this:

<Droppable droppableId={`${droppableId}`}>
 {droppableProvided => (
  <div ref={droppableProvided.innerRef} className={'body-item'}>
   <div className={'body-item-scrollable'}>
     {'Your <Draggable /> ...'}
    </div>
  </div>
 )}
</Droppable>

// Set overflow here -> remove DragDropContext auto-scroll (Pay attention)!
        .body-item {
          display: flex;
          width: 100%;
          height: 90%;
          align-items: center;
          flex-direction: column;
          justify-content: flex-start;

          @media (max-height: 900px) {
            height: 84%;
          }

          .body-item-scrollable {
            display: flex;
            overflow: auto;
            align-items: center;
            padding: 10px 15px 0;
            flex-direction: column;
          }
        }

Then works! :)

not work

[cmacdonnacha]

I don't know if what i did solve this problem but, instead of set a <div style={{ 'overflow': auto }} /> after a Droppable tag, i set a div without overflow and a tag div with overflow, after Droppable tag, like this:

<Droppable droppableId={`${droppableId}`}>
 {droppableProvided => (
  <div ref={droppableProvided.innerRef} className={'body-item'}>
   <div className={'body-item-scrollable'}>
     {'Your <Draggable /> ...'}
    </div>
  </div>
 )}
</Droppable>

// Set overflow here -> remove DragDropContext auto-scroll (Pay attention)!
        .body-item {
          display: flex;
          width: 100%;
          height: 90%;
          align-items: center;
          flex-direction: column;
          justify-content: flex-start;

          @media (max-height: 900px) {
            height: 84%;
          }

          .body-item-scrollable {
            display: flex;
            overflow: auto;
            align-items: center;
            padding: 10px 15px 0;
            flex-direction: column;
          }
        }

Then works! :)

Hey @kaue-esparta , would you have a codesanbox example of this working?

[the-coding-pie]

It won't work as expected but it will work using mouse scroll feature, because you can scroll inside column when dragging a card, but if you have a lot of cards and if the scrollbar is visible, you will be only able to drop it inside the visible area. But there is a hope, the scrolling using mouse will work! You can scroll and put the card till the bottom by scrolling using the mouse.

The way it won't work as we expected like in trello is because this nested scrolling feature #131 is not implemented yet, sad :(

[Leonardo-zyh]

It won't work as expected but it will work using mouse scroll feature, because you can scroll inside column when dragging a card, but if you have a lot of cards and if the scrollbar is visible, you will be only able to drop it inside the visible area. But there is a hope, the scrolling using mouse will work! You can scroll and put the card till the bottom by scrolling using the mouse.

The way it won't work as we expected like in trello is because this nested scrolling feature #131 is not implemented yet, sad :(

Can be rolled but not placed, guess it is not updated to drag the coordinates.

[SergeOlabin]

silly.. if there's an issue with multiple scrolls, Im ok with that. but it's also an issue that automatic scroll detection doesn't work properly. if that is so, why not just to allow users to define explicitly a scrollable element? lots of people having issues with a single dnd list