Hi,
I have a popup in Ignition Perspective that contains a Flex Repeater component. The repeater dynamically grows as instances are added by clicking a button inside the popup.
Currently, as new instances are added, the scroll appears only within the Flex Repeater component. However, my intended behavior is for the entire popup to scroll—so that the content inside the popup (including the Flex Repeater and any other components) remains fully visible within the popup’s scrollable area, rather than limiting the scroll to just the repeater.
Could you please advise how I can configure the layout, container settings, or style properties to make the entire popup scroll instead of just the Flex Repeater?
Expectation:
My output:
Thanks in advance.
The flex repeater should be set to basis: auto with grow and shrink: 0
I'm assuming you have grow shrink set to 1. You want the size of the repeater to be whatever size it needs to be to show all of its rows. Then it will force the containing container to show the scrollbars and not the repeater itself.
As an aside, it looks like you're duplicating the headers as well which you might want to fix
1 Like
I agree, remove the headers from the repeated view and just add them above the repeater.
I applied the suggested points but still same result.
Can you show us the repeater's properties ?
Is the repeater in a flex container with shrink: 1 ?
Also, try setting the repeaters overflow to visible, see if that helps.
Yeah it looks like it is. That's this issue now. Apply the same logic to all parent containers
I have set grow and shrink of repeater to 0 and basis as auto and overflow as visible. still the same.
I have attached the popup for your reference.
Popup.zip (17.5 KB)
The issue was exactly as we mentioned; the containing flex had grow/shrink: 1. I noticed lots of other issues as well where grow/shrink are set to 1 which ends up suishing components if they don't fit, % units are a bit average I would recommend changing to rem, including for font sizes, also adding gap: 0.3rem or similar to your flex containers, in particular the flex repeater.
.
However, I would suggest that you want the bottom row of buttons to always be visible, so in that case you would need to wrap all of the components above the bottom button row into a column flex set to grow/shrink:1
3 Likes
fwiw, this is how I would make this popup:
Popup--fixed.zip (21.2 KB)
There's still an issue with the template view where the icon is set to shrink; I haven't looked at the template view at all
1 Like
