# Flex Repeater element styles

**URL:** <https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 18, 2025, 8:43pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846 "2025-03-18T20:43:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\
**Post date:** [March 18, 2025, 8:43pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/1 "2025-03-18T20:43:30Z")

</div>

Hi all,

I am using a Flex Repeater and I have created 4 instances inside it, which shows in a column. I want when i add my 5 instance it should shift to the another column. can you help me with the Flex repeater element styles how can i do it ?  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/a/6a678d70718ffeaee60ff278e91a651cc400681a.png)  
this how it looks like.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6d429386944e68730f4775e050f81304959d80aa.png)  
this is my property editor.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/1200332b90aceeafb7f6efc01a1a96e570880989.png)  
This is something i want, just an idea

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 18, 2025, 8:56pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/2 "2025-03-18T20:56:04Z")

</div>

Change the `wrap` property to something other than `nowrap`. You'll need to make sure that your flex repeater is tall enough for only 4 items to make it wrap.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 18, 2025, 9:10pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/3 "2025-03-18T21:10:41Z")

</div>

![Flex repeater wrap](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/f/af16bdd7a56438966130cb63a3867d0848278950.gif)

> **Script transform on instances (on property binding to ../Slider.props.value).**
>
> ```python
> def transform(self, value, quality, timestamp):
> instances = []
> for num in range(value):
> instances.append({
> "instanceStyle": {
> "classes": ""
> },
> "instancePosition": {},
> "instanceNum": num
> })
> return instances
> 
> ```

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 18, 2025, 9:16pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/4 "2025-03-18T21:16:47Z")

</div>

> [@Transistor](#):
>
> Script transform

Toolkit expression alternative:

```python
forEach(
	{../Slider.props.value},
	asMap(
		'instanceStyle', asMap('classes', ''),
		'instancePosition', asMap(),
		'instanceNum', idx()
	)
)

```

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 18, 2025, 9:26pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/5 "2025-03-18T21:26:33Z")

</div>

It's time I started to play with your Toolkit.

Is there any handy way we can contribute sample code to get each other started? You have none as far as I can see. Or could we do it here with a thread per function?  
Should we get an `integration-toolkit` tag added? You've done enough for IA!  
Would the 3rd Party Modules section be the right place?

---

<div class="post-metadata">

**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\
**Post date:** [March 18, 2025, 9:38pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/6 "2025-03-18T21:38:58Z")

</div>

```python
[
  {
    "type": "ia.display.flex-repeater",
    "version": 0,
    "props": {
      "path": "Embedded/station/_stageToDel/Occupation",
      "direction": "column",
      "alignContent": "flex-start",
      "useDefaultViewWidth": false,
      "useDefaultViewHeight": false,
      "style": {
        "overflow": "hidden",
        "key": "value"
      }
    },
    "meta": {
      "name": "FlexRepeater"
    },
    "position": {
      "shrink": 0,
      "basis": "50%"
    },
    "custom": {},
    "propConfig": {
      "props.instances": {
        "binding": {
          "type": "property",
          "config": {
            "path": "view.params.currentOccupation"
          },
          "transforms": [
            {
              "code": " def getBit(number, index):\n \tmask = 1 << index\n \tif number & mask:\n \t\treturn 1\n \telse:\n \t\treturn 0\n \t\t\n \n instances = [{\"fill\": getBit(self.view.params.currentOccupation,i)} for i in range(self.view.params.maxOccupation)]\n\n return instances",
              "type": "script"
            },
            {
              "code": "\tinstances = []\n\tfor i in range(self.view.params.maxOccupation):\n\t\tinstances.append({\"instanceStyle\": {\"classes\": \"\"}, \"instancePosition\": {}, \"instanceNum\": i})\n\treturn instances",
              "type": "script"
            }
          ]
        }
      },
      "props.style.backgroundColor": {
        "binding": {
          "config": {
            "path": "view.params.stateColor"
          },
          "type": "property"
        }
      }
    }
  }
]

```

can you see it here how can i fix it.  
Because the above method doesn't work for me and i don't want the slider on top of it.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 18, 2025, 9:44pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/7 "2025-03-18T21:44:19Z")

</div>

> [@alikhan9347921](#):
>
> Because the above method doesn't work for me and i don't want the slider on top of it.

The slider was more for proving the point and allowing quick addition of instances for testing. You can omit that entirely if you want.

Based on your posted config you have not set `props.wrap` to `wrap` on the flex repeater. Do that first.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 18, 2025, 10:00pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/8 "2025-03-18T22:00:22Z")

</div>

Hmmm. A tag makes sense, and I **could** create it, but I'd rather not abuse my L4 powers for self-dealing.

Y'all are welcome to send me snippets to add to the user manual... in markdown format like this forum.

---

<div class="post-metadata">

**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\
**Post date:** [March 18, 2025, 10:09pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/9 "2025-03-18T22:09:14Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e4ee4d5b9c7d10d90722c4e531405f2eee0f1380.png)  
it looks something like this and even when i add the instance it doesn't wrap it.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/0/f08745fd9a13457a330bd196318ad017d7350374.png)  
this is what it shows

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 18, 2025, 10:19pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/10 "2025-03-18T22:19:24Z")

</div>

Your element (instance) basis is set to shrink. Either change `props.elementPosition.basis` to 0 or change `props.elementPosition.shrink` to 0

---

<div class="post-metadata">

**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\
**Post date:** [March 20, 2025, 4:35pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/11 "2025-03-20T16:35:28Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d8caaa3858b77e0ed42d7a3ef4eeca6049adcd56.png)  
this is what it looks like even when i change the shrink and basis.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/6/662109c21deec846ed9d556252abcf69acb39d50.png)  
this is my property editor.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 20, 2025, 4:52pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/12 "2025-03-20T16:52:53Z")

</div>

How big are your instances if you set `props.elementPosition.grow` to 0? It might be that your normal instance size is much smaller and they are growing to fill the extra space. You could also try setting `props.elementPosition.basis` to `50px` and see if they start to wrap.

---

<div class="post-metadata">

**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\
**Post date:** [March 20, 2025, 5:27pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/13 "2025-03-20T17:27:36Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/f/ff1f073b521bc32e4a65edf3d7e26bbe8f3b82ae.png)  
it starts wrapping after i add my 14th instance, is there any way that after 4th instance it starts wrapping and switch to the other column.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/f/9f7e1677111355020aeb0e6c81ab8f30502d4901.png)  
this is my property editor now.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 20, 2025, 6:05pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/14 "2025-03-20T18:05:37Z")

</div>

> [@alikhan9347921](#):
>
> is there any way that after 4th instance it starts wrapping

Yes. Set the container height \< 5 × repeated view height.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 20, 2025, 6:06pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/15 "2025-03-20T18:06:15Z")

</div>

> [@ryan.white](#):
>
> normal instance size is much smaller and they are growing to fill the extra space

This is what is happening. Clamp the min size of your template instances to force it to wrap after 4 instances or clamp the height of the repeater itself.

If your templates are going to have dynamic content it may be hard to force it to always wrap after 4.

---

<div class="post-metadata">

**Author:** ![vtran](https://avatars.discourse-cdn.com/v4/letter/v/779978/32.png) [@vtran](https://forum.inductiveautomation.com/u/vtran)\
**Post date:** [March 20, 2025, 6:32pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/16 "2025-03-20T18:32:24Z")

</div>

You can force the element height to be 25% of the flex repeater by adding a `height` property to the `elementStyle` property

So, something like this

```json
"elementStyle": {
  "classes": "",
  "height": 25%
}

```

or you can also use `calc()` function if you're anticipating some padding or margin  
E.g.

```json
"elementStyle": {
  "classes": "",
  "height": calc(25% - 5px)
}

```

---

<div class="post-metadata">

**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\
**Post date:** [March 20, 2025, 7:44pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/17 "2025-03-20T19:44:49Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/91ac3b6dcbc6fe3b4341e079b0a6c0921d3561e2.png)  
This works. Thanks

---

<div class="post-metadata">

**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\
**Post date:** [March 21, 2025, 6:41pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/18 "2025-03-21T18:41:42Z")

</div>

Hi Team,

Does anyone know if i want to reduce the space between the instances what should i do ?

for example if it is one it should look like this,

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/6229d9b104a1a17edd72b0e45ca4a439c6641782.png)

when it is 2 it should look like this,

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/6/66dbd4c07ab04c9d23c2974010e0bbb998393c40.png)

when it is 3 it should look like this,

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/8/3831e30be7c0ed7cd6b6d759d2df5cdc1d410ef5.png)

and on 4 or above it is good.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 21, 2025, 6:43pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/19 "2025-03-21T18:43:31Z")

</div>

Based on a quick browse of the repeater props you posted earlier, it looks like the box size in each instance is being driven by the embedded view. Open the embedded view and tweak to your needs.

You likely have a label component with a `margin` defined on its style, or the root container of the embedded view has `padding` defined on its style.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 21, 2025, 6:51pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-element-styles/103846/20 "2025-03-21T18:51:15Z")

</div>

The images you've shown in post #18 seem to show consistent spacing _between_ the instances.  
The _height_ of the instances is changing.