Perspective Flex Repeater - Add "spacing between instances" property

It’s very difficult to add spacing in between instances of a flex repeater without also adding a gap at the extremities against the bounding box. It would be great if there was a “spacing” prop that we could set to easily set a pixel or other gap between instances.

I’m trying to make a multi-state button template (view) as the existing component doesn’t do what I need (confirmation on action, on a per-button basis). It’s all good, except my buttons have no margins between them… edit: without added a script transform to add them in based on their position in the stack.
image

I don’t want to add left and right “show margin” params to my button view template itself, as I also want to use this button elsewhere and it these options outside of the multistate context doesn’t make sense.

Can you use the instanceStyle prop?

Ah yes, I can… whoops :sweat_smile: it will still rely on a script transform in order to add it into the instances config which is a tad annoying, but at least I won’t have to change my button view. Cheers

I do agree that it would be nice to have an easy way of implementing it though, similar to the gutters on the column container.

1 Like

There is a css style called “gap” (row-gap and column-gap too) designed for flex things Tho its “rather new” so might not work on everything. Newest browsers on pc should work tho.

Edit:
Seems to work in the designer too, just put it on the flex repeater style :smiley:


4 Likes

@victordcq to the rescue with the CSS magic as always haha, cheers

1 Like

The “gap” attribute is indeed an easy way to accomplish this.

In case anyone wants another solution that will work gracefully on older browsers, another common solution to this problem is to use a style class that defines a custom style for the last-child element state.
For example, your class would have:
Base Style: margin-right: 8px
Element State [last-child]: margin-right: 0px

Now you just apply this class in the repeater’s elementStyle object, and ta-da: gaps on each child except the last one. Admittedly, this doesn’t work well for wrapping, but it would work great for the original ask which was just a row.

5 Likes

I did not know this existed! Thanks :slight_smile:

1 Like