Rescale instances to fit Flex Repeater

[Eugene49]

Is there The Other Way Around to this:

Perspective Flex Repeater auto-fit contents - how?

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). [Perspective Flex Repeater gap] Figure 1. The problem gap with “wide” browser. [Perspective Flex Repeater scroll bar] 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:

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.

[Eugene49]

I did it, instances will even grow accordingly.

	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

[bmusson]

I don't exactly understand, are you looking for something like this?

[Eugene49]

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).

[bmusson]

Like this?

[Eugene49]

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.

[bmusson]

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

[Remco_Geervliet]

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?

[pascal.fragnoud]

Those correspond to css properties, and you can add them in your components style property, like this:

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:

no options with css case:

[Steve_Laubach]

I'm going to give that screen capture a try. It looks like you can record a cropped video easier than OBS.

[BenInReno]

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 !