Auto basis does not size for full embedded view

Ignition
1

I have an embedded view which is a column flex container. The embedded view consists of a label, and then below that, a flex repeater in row mode. The number of instances in the flex repeater is arbitrary.

The flex repeater represents a conveyor with a series of individually controllable "zones". Because we don't have the ability in perspective yet to draw rectangles, I'm just using a label with no text, and setting the background colours and so on to look like a rectangle. So what we end up with is something like this:

Screen Shot 2022-10-28 at 4.53.37 pm
Screen Shot 2022-10-28 at 4.53.37 pm801×102 1.5 KB

What I would like to do is, when I embed that view on a page, to be able to set the basis to "auto" and know that it will set itself to whatever width it needs to, in order to display the number of zones that particular conveyor has. However, when I set it to Auto, it shrinks to just the width of the "My Conveyor" label, since it determines that that label is the only actual content in the view.

Are there any tricks to get around this? Could I put something else on the view with a width to match the flex repeater's width, and have the "auto" parameter recognise it as something that needs to be displayed in full?

2

I'm wondering if you could an output parameter on that view, have some expression to find the width you need on the flex repeater.

Then in the parent view set the width of the embedded view object to that parameter using an expression

1 Like
3

Bingo! I've already done that math in the embedded view, I didn't think of passing it back out!

4

I think you're confusing what auto means. Auto will size the component to the minimum size it needs to be to fully contain it. For a label without text, that's probably the width of the border x 2.
What you want is to set the shrink and grow to 1, and the basis to anything, but make sure all your rectangle labels use the same basis. If they don't, it acts as a scaling / ratio. Ie if 2 rectangles have basis:1px and 3rd rect has basis: 2px, the 3rd will be 2 times larger than rect 1 and 2

5

Don't use expressions for this, there are ways to do this in css which will be much better.
Set grow to 1

6

The rectangles are just instances in a flex repeater. The view being embedded is a co-ordinate container in percent mode. The instances all have the same basis, which is settable by a view parameter so I can specify how large to show the zones.

It's a case of:

  1. Blank label in a coordinate container (percent, position 0,0, size 1,1 to fill whole container)
  2. Flex view containing a label (My Conveyor) and a flex repeater, which shows instances of the view above. Flex set to column, stretch. Instances of the flex repeater all set to e.g. 100px
  3. That view is embedded in another flex view, and the basis of that embedded view is set to auto

The embedded view doesn't consider that the flex repeater has any width and so it sets itself to the minimum size required to show the "My Conveyor" label

7

I see what you mean now.
I got it to work without expressions by setting the (2) flex repeater to useDefaultViewWidth. If you need to change the width of the conveyor link, then you can bind (1)'s defaultSize.width to a param you pass in.
E.g.
ConveyorTest.zip (8.1 KB)

1 Like
8

Perfect, that's done the trick. Initially I wanted to leave the useDefaultViewWidth off so that I could dynamically size it - didn't think of binding them!