CODEWITHSUNDEEP
reactjsdrag-and-dropdraggablereact-beautiful-dnd
user1893649
user1893649

Reputation: 177

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

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.

enter image description here

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

Upvotes: 1

Views: 4957

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58553

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

Edit #SO-flex-wrap-issue

Upvotes: 1

Related Questions