Automatically scroll the page when dragging a card if there is a large number of lanes

[MatthewEdwards]

Currently I have a large number of lanes that don't fit on the screen so I have to scroll across to see them. When dragging a card if I reach the right and there are lanes hidden it should scroll so I can place the card in the lanes that are off screen or if I am scrolled to the right and there are lanes hidden to the right it when dragging a card it should scroll back to the left

Is there any way to do this?

[rcdexta]

The library uses react-beautiful-dnd which automatically takes care scrolling the lane when the card is dragged to the end of the screen. I can check again with a test project. Make sure the css overflow attributes are set correctly from your end for this to work!

[gabefromutah]

@rcdexta Can you expand on which overflow attributes you are referring to or point me in the direction to the documentation that would outline these requirements?

[aditigoel23]

Did anyone make this work?
@rcdexta You can repro the issue on this example - http://rcdexta.me/react-trello/?selectedKind=Drag-n-Drop&selectedStory=Basic&full=0&down=0&left=1&panelRight=0
Make the window smaller than about 1500px. Can't drag from 1st lane to beyond say 4th lane.

[aditigoel23]

Looks like the react-beautiful-dnd module needs to be updated. Updating to latest solves this issue.

[rcdexta]

Yes, @aditigoel23 this was pending on react-beautiful-dnd long due. Upgraded the library to the latest version of dependency too!

See it in action here: