Fixed Column Layout in Flex Repeater Across All Viewports in Ignition Perspective

Ignition
1

  1. I am using a Flex Repeater in Ignition Perspective. Inside it, I dynamically pass the instances and set the mode to wrap. I was able to adjust the horizontal (width) gap, but I'm having trouble adjusting the vertical (height) gap between instances. Also, I want the Flex Repeater to display only 4 instances per row (i.e., 4 columns).

  2. When I switch to a different tab or view size (like tablet or mobile), the Flex Repeater
    automatically adjusts and shows only 3 or 2 instances per row.

    But I want the layout to always show exactly 4 instances per row, regardless of screen size
    or view type.

If anyone has suggestions, it would be very helpful!

image
image704×763 17.5 KB

image
image567×694 35.5 KB

thanks & regards
Arifrahuman.A

2

Try these settings. They should get you most of the way.

Flex repeater four in a row
Flex repeater four in a row317×355 20.2 KB

I set elementPosition.basis : 22% to be a little less than 25% to allow for gaps and it seemed to work. I didn't play with the value after that.

My repeating view root has mode : percent and the internal components' widths are given in percent.

3

Yes, I adjusted the basis property, and it successfully shows 4 columns per row.
But on the next row, the layout doesn't display correctly — the components inside the instances are overlapping or not aligned properly.

I also tried using a template view for the Flex Repeater, but the issue still occurs.
We'll also adjust the height gap.

mode: fixed

image
image762×786 15.4 KB

mode:percentage

image
image770×773 14.9 KB

4

Try,
elementPosition.grow : 0

Tip: don't use the LED Display component. It's outdated. A label will be much clearer and easier to read.

5

Yes Its working. Thanks @Transistor

6

Err, what about style.gap? Using a fixed percentage will be awfully breaky

Nevermind, I jumped to conclusions before reading the "4 per row" part. I think you could use something like basis: calc(25% - 3px) though so the gap doesn't change size as the page gets bigger

1 Like
7

Yes, that's better. I haven't got in the habit of doing CSS calculations. I must!