Velo Layout Issue (Flex/Wrap) in a Repeater

[Jonathan_MONGABURE]

Hello,

I am facing a persistent layout issue with a repeater on my Wix Studio site (Page: [Enter your page name here]).

Goal: In a Repeater, I want to display a list of ‘tags’ (up to 5 per item). These tags should align horizontally and wrap to the next line automatically if there isn’t enough space. Tags that are empty in the CMS collection should be hidden.

Element Structure:

• I have a Repeater (#repeater1) connected to my dataset.
• Inside each repeater item, I have a parent container (#tagsWrapper).
• Inside this wrapper, I have 5 ‘Button’ elements (#tagButton1, #tagButton2, etc.) that serve as the tags.

The Issue:

1. The Flex layout options do not appear in the UI for my container, even when following standard procedures.
2. To work around this, I used Velo code in the onItemReady function to force the layout styles.
3. The code runs with no errors in the console, but the styles (display: "flex" and flex-wrap: "wrap") are not being applied visually. The elements continue to stack vertically or overflow on a single line.

Here is the complete Velo code I am using:

$w.onReady(function () {
    // Make sure your repeater ID is correct
    $w("#repeater1").onItemReady( ($item, itemData, index) => {

        // PART 1: FORCING THE FLEX LAYOUT (This is the part that isn't working visually)
        const wrapper = $item("#tagsWrapper"); 
        wrapper.style.display = "flex";
        wrapper.style.flexWrap = "wrap";
        wrapper.style.gap = "8px";
        }
        // etc...
    });
});

Could you please investigate my editor to understand why the Velo styles are not being applied to this container in this context?

[noahlovell]

When writing code in the editor, you don’t have access to the DOM (unless using a custom element) - so .style.display won’t work

I’d recommend a repeater, with a flexbox element inside it. This would provide everything you described, and be responsive

Would look something like this:

And Flexbox is found here: