# Rescale instances to fit Flex Repeater **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [August 17, 2023, 10:21pm UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035 "2023-08-17T22:21:09Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 17, 2023, 10:21pm UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/1 "2023-08-17T22:21:09Z")
Is there The Other Way Around to this: > [@Perspective Flex Repeater auto-fit contents - how?](https://forum.inductiveautomation.com/t/perspective-flex-repeater-auto-fit-contents-how/43106): > > Ignition 8.1.1. I’m using the Flex Repeater to generate multiple instances of my dropdown view (a caption and a dropdown). How do I get it to autosize to “just” fit the contents. In my case I want the height to adjust and the table to be up against the Flex Repeater (with, of course, a little padding for elegance). Figure 1. The problem gap with “wide” browser. Figure 2. The problem scrollbar with “narrow” browser. Is… Where Flex Repeater size remain constant. Element's width height is reduced for all instances to fit. If there is no easy way to do this, I am ok with doing it the hard way. Hardway: ```auto while overflow occurs on flex repeater: then reduce element's width and height ``` Is it possible to check overflow? Is there a property under "elementStyle" to change each element's height width? Edit1: I guess there is no way to detect if repeater overflown. But I can get its width and height. Width = primaryView.width - 2xpadding - 2xmargin Height = its basis.. I can create multiple template, with different height and width. Next comes the hard part. Given the number of instance. Apply logic to path property: Binding returns the right template such that no overflow occurs How can I know which template to use, such that there is no overflow. Or I could write a message handler script to set templates width and path. Or pass it to the template's params. ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 18, 2023, 4:24am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/2 "2023-08-18T04:24:30Z")
I did it, instances will even grow accordingly. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a0678651598b4892835d11c02033fce80f75c5ff.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7a00f6f1cf0b0c1342731e98c442e74afa263188.png) ```auto viewWidth = value['viewWidth'] viewHeight = value['viewHeight'] defaultWidth = self.view.props.defaultSize.width defaultHeight = self.view.props.defaultSize.height basisTitle = self.getSibling("FlexContainer").position.basis basisRepeater = self.position.basis basisBottom = self.getSibling("Flex Vertical").position.basis basisTitle = int(basisTitle.split("p")[0]) basisRepeater = int(basisRepeater.split("p")[0]) basisBottom = int(basisBottom.split("p")[0]) #on designer viewWidth and viewHeight is 0 #is set to views default size if viewWidth == 0: viewWidth = defaultWidth if viewHeight == 0: viewHeight = defaultHeight horizontalMarginPadding = 2*20 repeaterWidth = viewWidth - horizontalMarginPadding repeaterHeight = basisRepeater + viewHeight - defaultHeight #clip height if repeaterHeight < basisRepeater: repeaterHeight = basisRepeater repeaterArea = repeaterWidth * repeaterHeight #my instance is square, A = w^2, solving for w=sqrt(A/n) instanceWidth = (repeaterArea/n)**(0.5) #recalculate repeaters dimension with instanceWidth allowance repeaterWidth = repeaterWidth - instanceWidth repeaterHeight = repeaterHeight - instanceWidth repeaterArea = repeaterWidth * repeaterHeight instanceWidth = (repeaterArea/trackerCount)**(0.5) instances = [] #create number of rows in instances depending on number of tracker for ctr in range(n): dict = {} dict['width'] = int(instanceWidth) instances.append(dict) return instances ``` 🙂 ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [August 18, 2023, 4:24am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/3 "2023-08-18T04:24:58Z")
![java_he3GKHvxmy](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/0/906bc0615c1ceb8cc1f45f218e05494ac45470e7.gif) I don't exactly understand, are you looking for something like this? ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 18, 2023, 4:27am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/4 "2023-08-18T04:27:43Z")
No.. the size of container must remains the same. But when you add more instances, the instances' size will reduce so that it will fit the container (flex repeater). ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [August 18, 2023, 4:29am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/5 "2023-08-18T04:29:25Z")
![java_EQJGSfZoK4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/874cc28138c5bdfa5fa57af48ebeb571a0e7d726.gif) Like this? ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 18, 2023, 4:33am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/6 "2023-08-18T04:33:05Z")
Yes. 🙂 my instances come in rows and columns though.. cool animation, what do you use to save clip? I have a dropdown(category), some category shows 10 instances, some can be 80. But container size should remain fix. ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [August 18, 2023, 4:45am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/7 "2023-08-18T04:45:26Z")
1. Set the Flex Repeater to `wrap`. 2. Set `elementPosition` to `grow: 1 shrink: 1 basis: auto`. 3. Set `alignItems` and `alignContent` to stretch. This will allow your instances to grow and shrink as needed to fill the full repeater. You can also play with assigning `minHeight`, `maxHeight`, `minWidth`, and `maxWidth` on your repeated instance in order to cap the amount of shrinking/growing. > [@Eugene49](#): > > what do you use to save clip? [ShareX](https://getsharex.com/) ---
**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\ **Post date:** [September 10, 2024, 9:00am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/8 "2024-09-10T09:00:56Z")
Not trying to hijack this post, but I think I have a similar issue that I feel like it should be addressed by your instructions, but I can't seem to figure it out. My flex repeater is set to fill the remaining area on screen (because of different screensizes the application is viewed from), and I want my templates to scale down to the point where they all fit on screen. 1 through 3 I had already set to the values you've described, but where to define the properties of your last remark I can't find. I think these are not natively suggested values? Do you define these on the repeated view, or the root container of the repeated view? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [September 10, 2024, 9:15am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/9 "2024-09-10T09:15:46Z")
Those correspond to css properties, and you can add them in your components `style` property, like this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/83243623a73a63addbc46981565769b5914ce49f.png) css properties are in the form `min-height`, and that case is also accepted, however using camelCase like ignition does you can get dropdowns and menus that correspond to the property's possible values. Exemple with `flexWrap`: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/f/9f9bb51fce2e091350fa8488a09dbf838a9dd6ea.png) no options with css case: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/561753ea5532637cb80ec38b58c1dbd806bf31bf.png) ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [September 10, 2024, 11:59am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/10 "2024-09-10T11:59:13Z")
I'm going to give that screen capture a try. It looks like you can record a cropped video easier than OBS. ---
**Author:** ![BenInReno](https://avatars.discourse-cdn.com/v4/letter/b/8edcca/32.png) [@BenInReno](https://forum.inductiveautomation.com/u/BenInReno)\ **Post date:** [December 10, 2024, 8:17pm UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/11 "2024-12-10T20:17:20Z")
Wow, this comment solved a big headache of mine! I've been unable to adjust the height of instances in a row flex repeater set to "wrap", they don't scale as expected for some reason, but by adding "height" under "elementStyle" (I used 50% for my 2 row flex repeater), the problem is solved. Thanks for the idea @pascal.fragnoud ! ---
**Author:** ![Nantha\_G](https://avatars.discourse-cdn.com/v4/letter/n/13edae/32.png) [@Nantha\_G](https://forum.inductiveautomation.com/u/Nantha_G)\ **Post date:** [February 3, 2026, 6:49am UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/12 "2026-02-03T06:49:34Z")
When using a Flex Repeater configured with a percentage-based `basis`, modifying the display property to `none` on individual instances results in the repeater being rescaled, whereas the expected behavior is for the repeater’s overall dimensions to remain constant. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/2/d2c60daab4532a82e1240f29825179ea8bb83628.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/ae0a20ba739bb5edb439e77d2cb94ebf92df20dd.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/8015fafc2bb16052e36f5ae3ea41f13394823e88.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/69b781dbb22aeb13ee6edbb89c24c275eef55078.png) When the display property is set to `none`, the Flex Repeater automatically rescales instead of maintaining a constant size. Looking forward to guidance on this issue ---
**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:** [February 3, 2026, 1:52pm UTC](https://forum.inductiveautomation.com/t/rescale-instances-to-fit-flex-repeater/78035/13 "2026-02-03T13:52:35Z")
Display: none is understood throughout web design to not reserve space for the undisplayed component/element. Try `visible: false` or zero opacity.