The current context looks like this:
There are a lot of items in the last column, and all columns are elongated and you need to scroll the entire webpage down to see the rest of the items in that last column.
What I want to achieve is:
The droppable columns have a maximum length, such that when there are more draggable items in one of it, the column length does not auto grow anymore. But you can scroll within that column downwards to show more draggable items.
Code:
const ProjectBoardLists = ({ ... }) => {
...
return (
<DragDropContext onDragEnd={HandleIssueDrop}>
<Lists>
{Object.values(IssueStatus).map(status => (
<List
currentUserId={currentUserId}
/>
))}
</Lists>
</DragDropContext>
);
};
and List is defined as
const List = ({ ... }) => {
...
return (
<Droppable key={status} droppableId={status} style={{overflow: "scroll"}}>
{provided => (
<List>
<Title>
{`${IssueStatusCopy[status]} `}
<IssuesCount>{formatIssuesCount(allListIssues, filteredListIssues)}</IssuesCount>
</Title>
<Issues
{...provided.droppableProps}
ref={provided.innerRef}
data-testid={`board-list:${status}`}
>
{filteredListIssues.map((issue, index) => (
<Issue key={issue.id} projectUsers={project.users} issue={issue} index={index} />
))}
{provided.placeholder}
</Issues>
</List>
)}
</Droppable>
);
};
The Documentation (https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#scroll-containers) claims that
This library supports dragging within scroll containers
(DOM elements that have overflow: auto; or overflow: scroll;).
The only supported use cases are:
The <Droppable /> can itself be a scroll container with no scrollable parents
The <Droppable /> has one scrollable parent
So I tried to add style={{overflow: "scroll"}} to <Droppable />, but nothing happened.
How exactly can I do it?
