Horizontal reorderable list

[Mevan]

Hi everyone,

I’ve been trying to create a horizontal reorderable list, but I’m running into an issue where the list only displays vertically.

What I want is for the items (images) to be laid out horizontally, and then be draggable so I can reorder them by dragging. If you check my second image, that’s exactly the layout and behavior I’m aiming for.

I’ve already tried using WeWeb AI, but that didn’t work at all. I also tried creating a custom component with AI, but I couldn’t get that to work either.

This feels like it should be a very simple thing, but I’ve been stuck on it for several hours now and can’t figure out what I’m missing.

Any help or guidance would be greatly appreciated

Thanks in advance!

[Agustin_Carozo (Agustin M. Carozo)]

Hi @Mevan , welcome back

Congrats on trying many solutions, you were close!

You just need to add custom CSS to your list: display: flex; gap: 8px; or flex-direction: row;

I got the solution from these 2 posts:

Form items inside a Reorder list

I have a form with an images section. I’ve put these images in the native Reorder List (with custom css to make it horizontal). I want to use the item.index’s and pass those as sortOrder when submitting the form, but I also want to use the checkbox so users can select which items they want to include in this specific submission. Problem: When clicking the checkbox inside the reorder list, nothing happens / gets logged. When I place it outside the list (as you can see in the screenshot) I get a…

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

I achieved it with this CSS as well (flex uses row direction by default): display: flex; gap: 8px;