Stackable list - is it possible to make the options horizontal and allow wrap?

Ask us anything How do I?
1

Hi there,

I love the Stackable element. I am wondering if it would be possible to give the Stackable List element the ability to be horizontal instead of vertical and allow elements to wrap around?

I am trying to basically create cards in a three across style which wrap around so the order of the cards would be

123
456
678

And I want the ability to drag 7 to where 2 is and push back the index of every other card by 1.

@Quentin @Joyce

Thank you

2 Likes
2

Not possible at the moment I believe, but a good suggestion. The team is currently focusing on revamping elements so we will keep this in mind when we come to the stackable list

5 Likes
3

+1 For horizontal layout

4

You can do this with CSS. The underlying library takes the direction of the layout as the direction of the sortable. I achieved this before with just custom CSS, but it requires some tinkering.

5

Hey are you able to expand on this and provide an example of the CSS you used? Would be super helpful!

1 Like
6

Nvm! for anyone viewing this thread later, add the following CSS to any list to achieve a horizontal layout:

flex-direction: row;

7

I achieved it with this CSS as well (flex uses row direction by default):

display: flex;
gap: 8px;