# How to Create Overlapping Instances in Ignition Flex Repeater (Avatar Stack Style)

**URL:** <https://forum.inductiveautomation.com/t/how-to-create-overlapping-instances-in-ignition-flex-repeater-avatar-stack-style/107586>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 19, 2025, 4:46pm UTC](https://forum.inductiveautomation.com/t/how-to-create-overlapping-instances-in-ignition-flex-repeater-avatar-stack-style/107586 "2025-06-19T16:46:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ARIFRAHUMAN\_A](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@ARIFRAHUMAN\_A](https://forum.inductiveautomation.com/u/ARIFRAHUMAN_A)\
**Post date:** [June 19, 2025, 4:46pm UTC](https://forum.inductiveautomation.com/t/how-to-create-overlapping-instances-in-ignition-flex-repeater-avatar-stack-style/107586/1 "2025-06-19T16:46:04Z")

</div>

I'm working with the Flex Repeater component in Ignition Perspective, and I need to overlap each instance (like avatar circles) slightly over the previous one—similar to the image I’ve attached.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/76ea5b3cfbcc367255cfcb6947721c545ac073e3.png)

Is there a way to achieve this within a Flex Repeater? Has anyone implemented something like this before? Any suggestions or ideas would be greatly appreciated.

Thank you!

---

<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:** [June 19, 2025, 4:47pm UTC](https://forum.inductiveautomation.com/t/how-to-create-overlapping-instances-in-ignition-flex-repeater-avatar-stack-style/107586/2 "2025-06-19T16:47:09Z")

</div>

No, but I'd try negative margins first.

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [June 20, 2025, 1:13am UTC](https://forum.inductiveautomation.com/t/how-to-create-overlapping-instances-in-ignition-flex-repeater-avatar-stack-style/107586/3 "2025-06-20T01:13:32Z")

</div>

Check Pikaview resource by IA on Exchange. [Ignition Exchange | Inductive Automation](https://inductiveautomation.com/exchange/2767/overview)  
It will be good starting point.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/34d0d0d87d5b109b5f853632738eb98404bbc81a.png)

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [June 20, 2025, 1:59pm UTC](https://forum.inductiveautomation.com/t/how-to-create-overlapping-instances-in-ignition-flex-repeater-avatar-stack-style/107586/4 "2025-06-20T13:59:05Z")

</div>

You can use `overflow: visible` to achieve this:

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

Repeater:

```python
{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "FlexRepeater"
        },
        "position": {
          "basis": "320px"
        },
        "props": {
          "elementPosition": {
            "basis": "24px",
            "grow": 0,
            "shrink": 0
          },
          "elementStyle": {
            "overflow": "visible"
          },
          "instances": [
            {
              "color": "#FF0000",
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            },
            {
              "color": "#00FF00",
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            },
            {
              "color": "#0000FF",
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            }
          ],
          "path": "Overlapping Repeater/icon",
          "useDefaultViewWidth": false
        },
        "type": "ia.display.flex-repeater"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}

```

Embedded icon:

```python
{
  "custom": {},
  "params": {
    "color": "#FF0000"
  },
  "propConfig": {
    "params.color": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 42,
      "width": 42
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Icon"
        },
        "position": {
          "basis": "42px",
          "shrink": 0
        },
        "propConfig": {
          "props.color": {
            "binding": {
              "config": {
                "path": "view.params.color"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "path": "material/insert_emoticon",
          "style": {
            "width": "42px"
          }
        },
        "type": "ia.display.icon"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "overflow": "visible"
      }
    },
    "type": "ia.container.flex"
  }
}

```