react-beautiful-dnd - adding Lists in next row if more than 4 Lists exist

Question

I'm using react-beautiful-dnd to drag and drop team members in different team lists. I have multiple Team lists, and a button which adds a new Team list. After I add 4 teams, I would like the 5th Team List to be on the second row.

Is this possible? If so, how? Currently, it extends horizontally. Re ordering the lists from different rows isn't a priority, however, I would like to be able to drag and drop the team members on Team lists in different rows.

Here is the codesandbox: https://codesandbox.io/s/teamlist-priwp?fontsize=14&hidenavigation=1&theme=dark

can you share the related code, or provide demo on codesandbox? — Vivek Doshi, Jun 12 '20 at 06:12

score 1 · Accepted Answer · answered Jun 12 '20 at 06:51

1

I've made 2 changes in css, you can use flex-wrap:

//App.js
const Container = styled.div`
  display: flex;
  flex-wrap: wrap; // <---- added
`;


//Team.js
// removed other flex properties from below
const Container = styled.div`
  margin: 8px;
  border: 1px solid lightgrey;
  border-radius: 2px;
  width: 220px;
  background-color: white;
`;

WORKING DEMO

answered Jun 12 '20 at 06:51

Vivek Doshi

56,649
12
110
122

Thank you! Works like a charm :) – user1893649 Jun 12 '20 at 14:13
@user1893649, glad to know,it helped :) – Vivek Doshi Jun 12 '20 at 14:18

react-beautiful-dnd - adding Lists in next row if more than 4 Lists exist

1 Answers1