# Automatic resizing of container depending on number of active alarms

**URL:** <https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [September 2, 2025, 1:58pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330 "2025-09-02T13:58:51Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luke\_Smith1](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Luke\_Smith1](https://forum.inductiveautomation.com/u/Luke_Smith1)\
**Post date:** [September 2, 2025, 1:58pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/1 "2025-09-02T13:58:51Z")

</div>

Hello,

I have an overview page that I am making and would like each system to show active alarms, if there are any. Currently, I ahve it working, but for aethetics would like the container holding the alarm status table to shrink/grow to the number of active alarms. I have a picture below. The scroll wheel on the left is fine, but I’d like the white section on the right to shrink to the size of the one alarm. Is this possible? I have tried many combinations of flex containers

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1e36091c526b47486cfd30f198881f74266d1ca9.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:** [September 2, 2025, 2:12pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/2 "2025-09-02T14:12:44Z")

</div>

If the container holding those items is a Flex Container, then try setting `basis: auto`, `grow: 0`, `shrink: 0`. If those alarms are in a Flex Repeater, do the same for it.

---

<div class="post-metadata">

**Author:** ![Luke\_Smith1](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Luke\_Smith1](https://forum.inductiveautomation.com/u/Luke_Smith1)\
**Post date:** [September 2, 2025, 2:17pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/3 "2025-09-02T14:17:07Z")

</div>

Change the position settings of the flex container itself, or the alarm status table? Currently they’re both set to Auto 0 0 like you suggested ☹

---

<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:** [September 2, 2025, 2:19pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/4 "2025-09-02T14:19:40Z")

</div>

Can you post the view code? Right-click on the view and select “Copy JSON”

---

<div class="post-metadata">

**Author:** ![Luke\_Smith1](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Luke\_Smith1](https://forum.inductiveautomation.com/u/Luke_Smith1)\
**Post date:** [September 2, 2025, 2:32pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/5 "2025-09-02T14:32:55Z")

</div>

I don’t have copy JSON options.

---

<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:** [September 2, 2025, 2:39pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/6 "2025-09-02T14:39:24Z")

</div>

Shift-right-click on the view's node in the designer navigation tree.

---

<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:** [September 2, 2025, 2:39pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/7 "2025-09-02T14:39:58Z")

</div>

Sorry, forgot to mention holding down SHIFT first.

---

<div class="post-metadata">

**Author:** ![Luke\_Smith1](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Luke\_Smith1](https://forum.inductiveautomation.com/u/Luke_Smith1)\
**Post date:** [September 2, 2025, 2:49pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/8 "2025-09-02T14:49:36Z")

</div>

Good to know, thanks. Here is the JSON from the pictures: Also I was wrong earlier, grow is set to 1 for the pictures. If it is set to 0 the entire section disappears.

```json
{
  "custom": {},
  "params": {
    "Alarm_Display_Path": "Bldg 19",
    "Building_Status": {
      "Number_Of_Systems": 0,
      "Systems_Alert_Cnt": 0,
      "Systems_Faulted_Cnt": 0,
      "Systems_Running_Cnt": 0
    },
    "Equipment_Image": "/system/images/",
    "Equipment_Name": "Equipment Name"
  },
  "propConfig": {
    "params.Alarm_Display_Path": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.Building_Status": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.Equipment_Image": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.Equipment_Name": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 501,
      "width": 534
    }
  },
  "root": {
    "children": [
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Label"
                },
                "position": {
                  "height": 1,
                  "width": 1
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "config": {
                        "expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.text": {
                    "binding": {
                      "config": {
                        "path": "view.params.Equipment_Name"
                      },
                      "type": "property"
                    }
                  }
                },
                "props": {
                  "alignVertical": "top",
                  "style": {
                    "backgroundColor": "",
                    "borderBottomLeftRadius": 5,
                    "borderBottomRightRadius": 5,
                    "borderTopLeftRadius": 5,
                    "borderTopRightRadius": 5,
                    "fontSize": 18,
                    "fontWeight": "bold",
                    "paddingTop": 8,
                    "textAlign": "center"
                  }
                },
                "type": "ia.display.label"
              },
              {
                "meta": {
                  "name": "Image"
                },
                "position": {
                  "height": 0.765,
                  "width": 0.9213,
                  "x": 0.0413,
                  "y": 0.2
                },
                "propConfig": {
                  "props.source": {
                    "binding": {
                      "config": {
                        "path": "view.params.Equipment_Image"
                      },
                      "type": "property"
                    }
                  }
                },
                "props": {
                  "fit": {
                    "mode": "cover"
                  }
                },
                "type": "ia.display.image"
              }
            ],
            "meta": {
              "name": "Title_Coord_cont"
            },
            "position": {
              "basis": "60%",
              "grow": 1
            },
            "props": {
              "mode": "percent"
            },
            "type": "ia.container.coord"
          },
          {
            "children": [
              {
                "meta": {
                  "name": "fault label"
                },
                "position": {
                  "height": 0.33,
                  "width": 0.6,
                  "y": 0.34
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "config": {
                        "expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
                      },
                      "type": "expr"
                    }
                  }
                },
                "props": {
                  "style": {
                    "backgroundColor": "",
                    "borderColor": "#FF0000",
                    "fontSize": 14,
                    "fontWeight": "bold",
                    "overflow": "visible",
                    "overflowX": "visible",
                    "overflowY": "visible",
                    "paddingLeft": 10
                  },
                  "text": "Systems Faulted:"
                },
                "type": "ia.display.label"
              },
              {
                "meta": {
                  "name": "Running label"
                },
                "position": {
                  "height": 0.34,
                  "width": 0.6
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "config": {
                        "expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
                      },
                      "type": "expr"
                    }
                  }
                },
                "props": {
                  "style": {
                    "backgroundColor": "",
                    "borderColor": "#FF0000",
                    "fontSize": 14,
                    "fontWeight": "bold",
                    "overflow": "visible",
                    "overflowX": "visible",
                    "overflowY": "visible",
                    "paddingLeft": 10
                  },
                  "text": "Systems Running:"
                },
                "type": "ia.display.label"
              },
              {
                "meta": {
                  "name": "running numbers"
                },
                "position": {
                  "height": 0.34,
                  "width": 0.4,
                  "x": 0.6
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "config": {
                        "expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "{view.params.Building_Status.Systems_Running_Cnt} + \" / \" + {view.params.Building_Status.Number_Of_Systems}"
                      },
                      "type": "expr"
                    }
                  }
                },
                "props": {
                  "style": {
                    "backgroundColor": "",
                    "borderColor": "#FF0000",
                    "fontSize": 14,
                    "fontWeight": "bold",
                    "overflow": "visible",
                    "overflowX": "visible",
                    "overflowY": "visible",
                    "textAlign": "center"
                  }
                },
                "type": "ia.display.label"
              },
              {
                "meta": {
                  "name": "Faulted number"
                },
                "position": {
                  "height": 0.33,
                  "width": 0.4,
                  "x": 0.6,
                  "y": 0.34
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "config": {
                        "expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "{view.params.Building_Status.Systems_Faulted_Cnt}"
                      },
                      "type": "expr"
                    }
                  }
                },
                "props": {
                  "style": {
                    "backgroundColor": "",
                    "borderColor": "#FF0000",
                    "fontSize": 14,
                    "fontWeight": "bold",
                    "overflow": "visible",
                    "overflowX": "visible",
                    "overflowY": "visible",
                    "textAlign": "center"
                  }
                },
                "type": "ia.display.label"
              },
              {
                "meta": {
                  "name": "Alert Number"
                },
                "position": {
                  "height": 0.33,
                  "width": 0.4,
                  "x": 0.6,
                  "y": 0.67
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "config": {
                        "expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "{view.params.Building_Status.Systems_Alert_Cnt}"
                      },
                      "type": "expr"
                    }
                  }
                },
                "props": {
                  "style": {
                    "backgroundColor": "",
                    "borderColor": "#FF0000",
                    "fontSize": 14,
                    "fontWeight": "bold",
                    "overflow": "visible",
                    "overflowX": "visible",
                    "overflowY": "visible",
                    "textAlign": "center"
                  }
                },
                "type": "ia.display.label"
              },
              {
                "meta": {
                  "name": "Alerts Label"
                },
                "position": {
                  "height": 0.33,
                  "width": 0.6,
                  "y": 0.67
                },
                "propConfig": {
                  "props.style.classes": {
                    "binding": {
                      "config": {
                        "expression": "if({view.params.Building_Status.Systems_Faulted_Cnt}>0, \"Colors/Overview_Red\", \"Colors/Overview_Green\")"
                      },
                      "type": "expr"
                    }
                  }
                },
                "props": {
                  "style": {
                    "backgroundColor": "",
                    "borderColor": "#FF0000",
                    "fontSize": 14,
                    "fontWeight": "bold",
                    "overflow": "visible",
                    "overflowX": "visible",
                    "overflowY": "visible",
                    "paddingLeft": 10
                  },
                  "text": "Systems Alerts:"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "Stats_Container"
            },
            "position": {
              "basis": "20%",
              "grow": 1
            },
            "props": {
              "mode": "percent"
            },
            "type": "ia.container.coord"
          },
          {
            "meta": {
              "name": "AlarmStatusTable"
            },
            "position": {
              "grow": 1,
              "shrink": 0
            },
            "propConfig": {
              "props.filters.active.conditions.displayPath": {
                "binding": {
                  "config": {
                    "expression": "'*'+{view.params.Alarm_Display_Path}+'*'"
                  },
                  "type": "expr"
                }
              }
            },
            "props": {
              "columns": {
                "active": {
                  "activeTime": {
                    "enabled": false,
                    "width": 85
                  },
                  "displayPath": {
                    "width": 160
                  },
                  "label": {
                    "enabled": true,
                    "width": 125
                  },
                  "name": {
                    "enabled": false
                  },
                  "priority": {
                    "enabled": false
                  },
                  "source": {
                    "enabled": false
                  },
                  "state": {
                    "enabled": false
                  }
                }
              },
              "enableAcknowledge": false,
              "enableDetails": false,
              "enableHeader": false,
              "enableShelve": false,
              "enableUnshelve": false,
              "filters": {
                "active": {
                  "conditions": {
                    "provider": "IGNTN-PE-VP01"
                  },
                  "states": {
                    "clearUnacked": false
                  }
                }
              },
              "pager": {
                "enabled": false,
                "initialOption": 50
              },
              "rowStyles": {
                "clearAcked": {
                  "base": {
                    "backgroundColor": "#E8E8E8"
                  }
                }
              },
              "selection": {
                "active": {
                  "mode": "none"
                }
              },
              "style": {
                "backgroundColor": "#572020"
              },
              "toolbar": {
                "enableConfiguration": false,
                "enablePreFilters": false,
                "enableShelvedTab": false,
                "enabled": false
              }
            },
            "type": "ia.display.alarmstatustable"
          }
        ],
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "align": "auto",
          "basis": "100%",
          "grow": 1
        },
        "props": {
          "direction": "column",
          "style": {
            "backgroundColor": "#E8E8E8"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "alignContent": "space-between",
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}

```

---

<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:** [September 2, 2025, 2:56pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/9 "2025-09-02T14:56:21Z")

</div>

Not sure how you pasted that, but usually there’s a copy icon when someone posts code, and I don’t see that. Then when I select it all and copy/paste it into Designer, it says “Data in clipboard is not a valid view config.”

---

<div class="post-metadata">

**Author:** ![Luke\_Smith1](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Luke\_Smith1](https://forum.inductiveautomation.com/u/Luke_Smith1)\
**Post date:** [September 2, 2025, 2:58pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/10 "2025-09-02T14:58:27Z")

</div>

Interesting, try again I edited it

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [September 2, 2025, 3:00pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/11 "2025-09-02T15:00:04Z")

</div>

You need to post it as Pre-Formatted text.

Please see [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831).

---

<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:** [September 2, 2025, 3:13pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/12 "2025-09-02T15:13:49Z")

</div>

As @lrose said:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/f/1f93f50e2e044a9ed957bad5ed93e05d6228cc56.png)

---

<div class="post-metadata">

**Author:** ![Luke\_Smith1](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Luke\_Smith1](https://forum.inductiveautomation.com/u/Luke_Smith1)\
**Post date:** [September 2, 2025, 3:29pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/13 "2025-09-02T15:29:53Z")

</div>

done, i had it that way at first but also included blockquote accidentally

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [September 2, 2025, 3:37pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/14 "2025-09-02T15:37:43Z")

</div>

You still didn't quite have it right, but I've fixed it.  
You just want three backticks around the raw string:

````
```
some preformatted text
```

````

---

<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:** [September 2, 2025, 3:43pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/15 "2025-09-02T15:43:56Z")

</div>

AlarmStatusTable is set to `grow: 1` and `shrink: 0`. Reverse that.

---

<div class="post-metadata">

**Author:** ![Luke\_Smith1](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Luke\_Smith1](https://forum.inductiveautomation.com/u/Luke_Smith1)\
**Post date:** [September 2, 2025, 3:49pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/16 "2025-09-02T15:49:49Z")

</div>

Done, container shrinks down to a thin line

---

<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:** [September 2, 2025, 3:52pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/17 "2025-09-02T15:52:39Z")

</div>

You may want `shrink: 0` if it’s actually hiding content.

---

<div class="post-metadata">

**Author:** ![Luke\_Smith1](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Luke\_Smith1](https://forum.inductiveautomation.com/u/Luke_Smith1)\
**Post date:** [September 3, 2025, 2:07pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/18 "2025-09-03T14:07:43Z")

</div>

I think I was confusing, I mean even with content in the box it shrinks to a thin line and hides content.

---

<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:** [September 3, 2025, 2:09pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/19 "2025-09-03T14:09:28Z")

</div>

Even if you set `shrink: 0`?

---

<div class="post-metadata">

**Author:** ![Luke\_Smith1](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Luke\_Smith1](https://forum.inductiveautomation.com/u/Luke_Smith1)\
**Post date:** [September 3, 2025, 2:10pm UTC](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330/20 "2025-09-03T14:10:57Z")

</div>

Yes thats if i set shrink to 0 its a thin line no matter what.

[Next page](https://forum.inductiveautomation.com/t/automatic-resizing-of-container-depending-on-number-of-active-alarms/110330.md?page=2)