[Bug] Perspective Flex Container 'auto' Basis Not Calculating Size Correctly

Ignition
,
1

I keep running into an issue with flex containers and flex repeaters not calculating the size correctly when using the ‘auto’ basis. I saw and responded to another post with this same or a very similar issue, but I searched and didn’t see any posts directly discussing this as a bug. Here is a simple example showing what I’m talking about:

Example 1

This is the structure for the view:

View Structure

The relevant position props:

  • root (Flex row): width: 200, height: 50
  • FlexContainer (row): grow: 0, shrink: 0, basis: auto
  • Icon: grow: 0, shrink: 0, basis: 50px
  • Label: grow: 0, shrink: 0, basis: auto (this can also be set to a fixed width and the same issue occurs)

And after scrolling all the way to the right you can see the width of the FlexContainer is the exact width of the label:

Example 2

If I add margins of 10 on the left and right to the icon and label you can see it will add 40 to the container width, but it still cuts off at the right edge of the label’s text:

Margin Example

I’ve also experienced this with other components in place of the icon such as an empty container and an image. To me this definitely doesn’t seem like intended behavior and has given me trouble with using flex repeaters as well as grouping components together that are intended to run the same script, open the same popup when hovered over, etc. Maybe I’m just overlooking something, but I’ve messed around quite a bit with the relevant props and haven’t gotten anything to work.

4 Likes
2

I see this as well, would be good to get it fixed! Been meaning to report it myself for a while

2 Likes
3

I saw this in the 8.1.8 release notes and figured I’d see if this bug was fixed with it, but it’s still present.

Capture

4

Good post, this bug is very frustrating. It would be good to get a fix.

5

This is something from css, handled by the browsers. Not really something ignition can do something about. As you’ll if you use it in firefox it will grow to full screen.

Why dont you set on grow? its like the only reason to use flex containers… to have them flex xD

6

There are many times when I need a container with the exact width of some dynamic text + an icon, color swatch, etc. As of now, the only other options would be to not use templates for some of these components, set it to a fixed width, or find some workarounds, which I’ve done in the past but have always been hacky and time consuming.

7

Any updates on this? Still an issue in 8.1.35

Does anyone have a workaround?

8

For icons and SVGs, I always set the style.width (or height, depending on flex direction) of them to ensure that auto sizing works. This means you end up with both a position.basis and style.width size that are identical which is a bit average... but it fixes the auto sizing problem

1 Like