Flex repeater items with dynamic height

Hello, all. We recently updated our Ignition gateway from 8.0.17 to 8.1.1, and we’re experiencing a new issue with Flex Repeaters that we didn’t see before the update.

We have a vertically repeating Flex Repeater where useDefaultViewHeight is set to true. Each child view instance sets its height dynamically, based on the view’s contents. This dynamic height is calculated in the child view’s defaultSize parameter.

Prior to the update to 8.1, this worked great. We could set the height of the child instance views dynamically, and the Flex Repeater would lay out views with the appropriate heights. Now, with 8.1, when the page first loads, the instances are way too tall. When we reload the page, the Flex Repeater then uses the correct heights defined by the child views.

Is this a bug? Is there a different way we should be setting dynamic heights for flex repeater child view instances?

This is how the views should look:

image

This is how the views look in 8.1 until the user refreshes the page:

While I’m not saying this isn’t a bug, I will say that your use of defaultHeight goes against the expected usage. A “default” value is just that: a single value which will be used as the default. Making that value variable makes it something other than a “default”, because it’s different every time. I don’t see from your screenshots how the height of the instanced views would change, so if they don’t actually change, you should just define the height and be done with it. If they do change, then you don’t want to use the defaultHeight anyway; you want to let the Flex Repeater determine how tall they should be.

If you could supply the Views in use through this thread or a direct message I could look to see what the best solution for you would be.

Thanks for the information. Although these screenshots don’t show instances with different heights, we do have cases where an instance will be twice as tall as shown in the screenshot.

Our preference is for the child view to do the height calculation rather than the Flex Repeaters doing the calculation in order to improve reusability. If we calculate the heights in the Flex Repeaters, when we reuse this child view in a different component, we would need to duplicate the height calculation in the other component. By doing the calculation in the child, the theory is that the child would always be the correct height, regardless of what parent it’s embedded in.

Don’t calculate the height. The Flex Repeater calculates the instance height automatically if useDefaultHeight is false. This will give each instance as much height as it needs to render. If there is more space to fill in the repeater, then each instance gets a bit more space. If there is not enough room, you can either wrap the instances, which would result in additional columns, or if you don’t wrap, then the flex repeater will get a scrollbar.

When I turn off the dynamic height of the instance views and set useDefaultHeight to false, the instance views completely disappear. I’m not sure what’s going on with that.

Try this.

I’ve come up with a solution. In each item in the Flex Repeater’s instances property, I’m setting instancePosition.grow to 0 and .basis to the desired height. Instead of including the height calculation code directly in the Flex Repeater when constructing the instances, that code is in a script in the Project Library where it can be reused by other container views if needed.

2 Likes