Dynamic Column Height

Hi, I’m trying to resize a column flex container height based on its contents.

For a Column repeater container I managed a binding on the height property:

len({this.props.instances}) * ({this.props.elementPosition.basis} + 1) + 'px'

This is still not ideal, because the property {this.props.elementPosition.basis} still has to be set manually, I couldn’t find a way to bind it to the height of the view of the real element that is repeated.

In a column flex container I have the opposite problem. The elements can resize their view to the original height with the property useDefaultViewHeight. However, for this to work the property {position.basis} has to be left blank, so I cannot set the column height to the sum of its elements height.

Is there a property that can be added to get the column contents height or something similar and bind it to the parent view height?

I am having a hard time to fully understand what you are looking for exactly after reading your OP. But I wanted to ask if setting the flex container’s basis to auto helps you?

1 Like

I'm with @dillon on this: Why not just use auto as your container's basis ?
Set grow and shrink to 0, and basis to auto. Maybe add some padding and gap to make things look nice.

You shouldn't have to resort to calculating things... unless you're trying to animate the container's height with transition.
I've had to do this kind of things once, I needed containers to transition from 0 to their full size, and this doesn't work with auto. That's the only case I've encountered where auto wasn't enough.

1 Like

Basically I have a view which consist of a list of configuration parameters.

For maintenance and resusability, I grouped the parameters by topic in different views, lets call each of this a sub-view.

Each of the sub-views is a column with different componentes where one is a column repeater. The amount of repetitions in each of the sub-views is variable according to configuration.

The main view is a column of the different sub-views.

The issue i’m not able to solve is that if I don’t resize correctly the sub-views to its contents, then the main view has empty spaces (if I over estimate the size) or has internal scrollbars (if I underestimate the size).

In other GUI tools I used, a situation like this is solved setting the sub-view height to its content height. In this case I did it with the formula going over each element. Then, the ‘auto’ parameter in the main-view column works.

One level up happens the same, I don’t want the main-view column to scroll on its own, so I need it to be resized to its contents and now I don’t have accesible the sub-views height.

In any case, this is only aesthetics. I put the main-view column height to the maximum condition value and deal with the scroll bar when there are only two elements in view. I just need to remenber to make it bigger if more possible options are added to any sub-view

Could you make a sanitized copy of this view and send it to me ?
You can copy and paste the view’s json.

I can’t see why setting everything to auto wouldn’t work, so if I can put my hands on the actual view…

Hi, sorry for the delay. I made an example of what i want to do. Basically there are columns within columns. I want to be able to scroll the mainView as one item, not the left and right columns independently. Also, I don’t want to see empty spaces or sub-scrollbars when changing the “test state”.

I would like to know if this is possible to do. I have done this type of screens with other technologies. I have used the “child content height”, or similar property, to resize the parent view. I am not understanding how to get that in ignition.

This is a concept, there is a lot of room to play around with margins and extra spaces, but they do not solve the issue, I think.

I attatch a screenshot and the exported project to try to make sense of what i’m trying to do.

dynamic_height_v1.zip (29.1 KB)