# Dynamic UDT-Driven Dashboard with Nested Flex Repeaters: Sizing/Scaling Help

**URL:** <https://forum.inductiveautomation.com/t/dynamic-udt-driven-dashboard-with-nested-flex-repeaters-sizing-scaling-help/117154>\
**Category:** Ignition\
**Tags:** perspective, ignition83, scripting\
**Created:** [September 21, 2026, 11:51pm UTC](https://forum.inductiveautomation.com/t/dynamic-udt-driven-dashboard-with-nested-flex-repeaters-sizing-scaling-help/117154 "2026-09-21T23:51:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hudson](https://avatars.discourse-cdn.com/v4/letter/h/7ea924/32.png) [@hudson](https://forum.inductiveautomation.com/u/hudson)\
**Post date:** [September 21, 2026, 11:51pm UTC](https://forum.inductiveautomation.com/t/dynamic-udt-driven-dashboard-with-nested-flex-repeaters-sizing-scaling-help/117154/1 "2026-09-21T23:51:21Z")

</div>

**Question:**

How to make nested flex containers scale to be their child's child size?

**Background** :

I am building a flexible dashboard to display the properties of batched chemical processing equipment. We can think of these machines as a composition of tanks, which each contain a variety of components (pumps, heaters, fans, pH sensors, etc.). And each of these components has some signals like temperature, differential pressure, current, rpm, etc. Some components (even of the same type) have more signals than others, and the composition of these components varies tank-to-tank. This makes creating a custom view for each component and tank an extremely manual process. Lets automate it.

I have created a nice UDT structure to describe this machinery where discrete and analog signal UDTs are combined by component UDTs, which get combined to create different tank (abstracted to modules) UDTs. Now, given these UDTs, a few different handcrafted views for my analog and discrete signal UDTs (think like a gaugeView, thermometerView, ledDisplayView, etc.), and a UDT property pointing to which one the signal UDT should use (can be defaulted to the simple ledDisplayView), I should be able to create any combination of tanks and components completely for free. I have successfully created this, but unfortunately, due to some workarounds, I have been unable to figure out how to effectively scale my components so it is usable in a real environment.

**My approach so far:**

The core of my approach relies on flex repeaters pointing to a generic ComponentHost, which has 2 props: viewPath and tagPath. Inside the ComponentHost is an embedded view which points to a view of viewPath and passes tagPath into that view. (This is required to work around flexRepeaters only pointing to a single view). The following script can be used to look at all the signal tags in your component and generate a view in the flex repeater:

```python
componentsPath = str(value).rstrip("/") + "/Signals"
instances = []

results = system.tag.browse(
    componentsPath,
    {"tagType": "UdtInstance"}
).getResults()

for tag in results:
    udtPath = str(tag["fullPath"])
    viewPath = system.tag.readBlocking([udtPath + "/Parameters.ViewPath"])[0].value
    if viewPath is not None: # or viewPath is not "":
        instances.append({
            "tagPath": str(tag["fullPath"]),
            "viewPath": viewPath
        })

return instances

```

Now this will produce a single view with all the signal UDTs you defined, so now just repeat this for all the components in a module. (You must use a different flex repeater view and ComponentHost to prevent nesting a view inside itself.)

```python
componentsPath = str(value).rstrip("/") + "/Components"
instances = []

results = system.tag.browse(
    componentsPath,
    {"tagType": "UdtInstance"}
).getResults()

for tag in results:
    udtPath = str(tag["fullPath"])
    viewPath = system.tag.readBlocking([udtPath + "/Parameters.ViewPath"])[0].value
    if viewPath is not None: # or viewPath is not "":
        instances.append({
            "tagPath": str(tag["fullPath"]),
            "viewPath": viewPath
        })

return instances

```

Beautiful, this is great, a little janky and kinda weird; the duplicate components and flex repeaters are not ideal, but we have all done worse things in Ignition. My problems occur when I try and make all my views scalable so that the Component view takes up just the space required by its signal views, and the tank view nicely tabulates those component views into something viewable by an engineer's laptop or a TV dashboard on the floor. **Ideally, each flex repeater will take up just the space of its children, and the children will scale to fit the size of the screen (based on their aspect ratio and wrap constraints)**. Unfortunately, I have not been able to achieve this without getting into some really hacky CSS stuff. Could I please get some advice on how to approach this styling problem? M **y assumption is the crux of my problem is flex views want to scale their children to themselves, not vice versa, and my ComponentHost views are messing up my sizing even more.**

**What I have Tried:**  
So my first goal is to make each flex repeater take up exactly the space of its children. To this end, I made all my signal views coordinate containers in percent mode and my ComponentHosts Coordinate views with the embedded view's width:1 height:1 useDefaultWidth:false useDefaultHeight:false. Unfortunately, no matter how much I would mess with the grow, shrink, basis on the flex container, the flex container would squish my views into tiny strips.

Next, I tried making my ComponentHosts flex views, but that also didn't work, so I reverted back to Coordinate Containers.

I currently have my ComponentHosts and FlexRepeaters with useDefaultWidth:true useDefaultHeight:true. This eliminates all scaling, so it will not work in production, but does validate that the underlying machinery works.

Can anyone please recommend what combination of styling parameters will work?

---

<div class="post-metadata">

**Author:** ![owen.holmberg](https://avatars.discourse-cdn.com/v4/letter/o/e9c0ed/32.png) [@owen.holmberg](https://forum.inductiveautomation.com/u/owen.holmberg)\
**Post date:** [October 1, 2026, 5:59pm UTC](https://forum.inductiveautomation.com/t/dynamic-udt-driven-dashboard-with-nested-flex-repeaters-sizing-scaling-help/117154/2 "2026-10-01T17:59:59Z")

</div>

I think we did something similar for a device I/O page. We were three layers deep in flex repeaters. Top level was device type. Each device type had a repeater for each device. Then each device had two repeaters, one for inputs and one for outputs. The whole page was auto-configured based on tag folders, tag names, and udt members. No repeater took up more space than it needed to.

Every layer of repeater had elementPosition basis:auto, and each repeater had position basis:auto. useDefaultViewWidth was true only on the device repeater to preserve a grid-like structure.

---

<div class="post-metadata">

**Author:** ![hudson](https://avatars.discourse-cdn.com/v4/letter/h/7ea924/32.png) [@hudson](https://forum.inductiveautomation.com/u/hudson)\
**Post date:** [October 1, 2026, 6:32pm UTC](https://forum.inductiveautomation.com/t/dynamic-udt-driven-dashboard-with-nested-flex-repeaters-sizing-scaling-help/117154/3 "2026-10-01T18:32:53Z")

</div>

Thank you so much for the reply! I figured it out with a slightly different solution. I really wanted to avoid the useDefaultViewWidth because my these components will end up on different sized screen. The biggest solution was to make everything a flex container (mixing flex containers and containers (in percent mode) has caused me nothing but trouble). I needed to be disciplined about correctly setting my basis, shrink, and grow for every view, and make the dummy ComponentViews be basis: auto, width:auto, and height:auto. I want to write up a more comprehensive tutorial post about how I did it because it is super powerful when combined with UDTs and is really cool when i worked.
