[BUG] Flex containers set to auto basis don't size correctly

[nminchin]

Recently, more often than not I've noticed that when I add components into a flex container and have a mixture of fixed and auto basis, with the flex container basis being set to auto as well, the flex container size doesn't get set correctly and is too short. The fix/workaround is to set the style.width/height (depending on flex direction) of the components with fixed basis to the same size as their basis, but it's a bit annoying having to set it twice.

Demo below of a label and a dropdown menu inside a flex container, where this flex is contained within a parent flex that has some buttons as well. The label is set to auto basis and the dropdown is set to 250px. I've added top/bottom padding so you can see the buttons behind it. If I don't set style.width then this is how it displays:

After adding style.width:

[Ryan_Deardorff]

Shouldn't the container be a direct translation into a CSS flex container? Have you inspected the page elements to see if it's translating properly? Otherwise it would suggest a bug in the browser's interpretation of CSS, which doesn't seem likely...

[YF129701]

I just wanted to say that I also don't experience this bug and I do what you describe pretty much all the time (mix fixed and auto basis). Sometimes, I do notice that the CSS setting almost doesn't apply, but if I click on another component or (in more extreme scenarios), close and reopen the view, it'll work normally. Most of the time, it works exactly how I would expect and how you describe.

This is for a smattering of versions, from about 8.1.25 to the current version.

The only thing I would suggest is to check the devtools as @Ryan_Deardorff suggested, to see if you have a CSS global override defined somewhere in a theme file, the advanced stylesheet, or as an "injection".

[nminchin]

Can you guys try with a label and an icon? Where the label is auto and icon is say 30px

[YF129701]

I'm not totally following, but here is a start:

Can you explain what you want me to test?

[nminchin]

OuterFlex OF_C1 has scrollbars despite being set to auto basis... I'll dig into the CSS

OuterFlex JSON

[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "style": {
        "border": "1px solid lightgreen",
        "padding": "5px",
        "gap": "5px"
      }
    },
    "meta": {
      "name": "OuterFlex"
    },
    "position": {
      "basis": "200px"
    },
    "custom": {},
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "style": {
            "border": "1px solid pink",
            "padding": "5px",
            "gap": "5px"
          }
        },
        "meta": {
          "name": "OF_C1"
        },
        "position": {
          "shrink": 0
        },
        "custom": {},
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "props": {
              "text": "OF_C1_C1",
              "style": {
                "border": "1px solid skyblue"
              }
            },
            "meta": {
              "name": "OF_C1_C1"
            },
            "position": {
              "shrink": 0,
              "basis": "100px"
            },
            "custom": {}
          },
          {
            "type": "ia.display.label",
            "version": 0,
            "props": {
              "text": "OF_C1_C2",
              "style": {
                "border": "1px solid skyblue"
              }
            },
            "meta": {
              "name": "OF_C1_C2"
            },
            "position": {
              "shrink": 0,
              "basis": "90px"
            },
            "custom": {}
          }
        ]
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "OF_C2",
          "style": {
            "border": "1px solid pink"
          }
        },
        "meta": {
          "name": "OF_C2"
        },
        "position": {
          "shrink": 0,
          "basis": "150px"
        },
        "custom": {}
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "OF_C3",
          "style": {
            "border": "1px solid pink"
          }
        },
        "meta": {
          "name": "OF_C3"
        },
        "position": {
          "grow": 1,
          "basis": "150px"
        },
        "custom": {}
      }
    ]
  }
]

Edit:
I see this in the Computed styles for that flex container which is odd...

I can see that it's definitely applying flex: 0 0 auto to the OuterFlex OF_C1 which is correct.

This is the View JSON itself:

View JSON

{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "OF_C1_C1"
                },
                "position": {
                  "basis": "100px",
                  "shrink": 0
                },
                "props": {
                  "style": {
                    "border": "1px solid skyblue"
                  },
                  "text": "OF_C1_C1"
                },
                "type": "ia.display.label"
              },
              {
                "meta": {
                  "name": "OF_C1_C2"
                },
                "position": {
                  "basis": "90px",
                  "shrink": 0
                },
                "props": {
                  "style": {
                    "border": "1px solid skyblue"
                  },
                  "text": "OF_C1_C2"
                },
                "type": "ia.display.label"
              }
            ],
            "meta": {
              "name": "OF_C1"
            },
            "position": {
              "shrink": 0
            },
            "props": {
              "style": {
                "border": "1px solid pink",
                "gap": "5px",
                "padding": "5px"
              }
            },
            "type": "ia.container.flex"
          },
          {
            "meta": {
              "name": "OF_C2"
            },
            "position": {
              "basis": "150px",
              "shrink": 0
            },
            "props": {
              "style": {
                "border": "1px solid pink"
              },
              "text": "OF_C2"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "OF_C3"
            },
            "position": {
              "basis": "150px",
              "grow": 1
            },
            "props": {
              "style": {
                "border": "1px solid pink"
              },
              "text": "OF_C3"
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "OuterFlex"
        },
        "position": {
          "basis": "200px"
        },
        "props": {
          "style": {
            "border": "1px solid lightgreen",
            "gap": "5px",
            "padding": "5px"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "padding": "5px"
      }
    },
    "type": "ia.container.flex"
  }
}

[victordcq]

Sounds similar to this issue you had a 3 years ago

[BUG] Perspective flex "auto" not behaving as expected with icon and svg

So i ran against this problem myself the other day, but in a tottaly different situation with one of my custom components. So i put on some javascript to debug and it seems like the svgs are doing weird things with their width in flex containers. This seems to be a browser issue, not ignitions fault. You can fix it by putting a width in the style of the svg/icon! @nminchin i just tested it out on the example you once send and it seems to work for this too [image] [image] adding a width to …

[nminchin]

yep except this time it's not working with simple labels either...

[Ryan_Deardorff]

@nminchin

OuterFlex has scrollbars despite being set to auto basis

Auto basis doesn't prevent scrollbars. Those are determined by the overflow propery.

[nminchin]

Auto basis should prevent scrollbars on the flex container that it's defined on though, since setting to auto should size the flex container large enough to fit all of its components, therefore scrollbars on that flex are eliminated. If the containing flex isn't large enough however to contain it, tjhen that containing flex will get scrollbars. But that isn't the case here.

Actually, in your quote of mine, I should have refered to OF_C1, not OuterFlex, as it's OF_C1 that has the scrollbars which shouldn't

[Ryan_Deardorff]

Yes, that is determined by whether the container it is in has enough space, which in the case of your screenshot indicates that OF_C2 and OF_C3 are taking up more space than they need to. What is their basis set to?

[nminchin]

@Ryan_Deardorff

that is determined by whether the container it is in has enough space

This isn't correct. basis: auto will (should) size the component to fully emcompass all of its contents (if shrink is off), regardless of the size of the container it's in. Containers with basis: auto should never have scrollbars on them directly, it's the parent that would get the scrollbars, so OF_C2 and OF_C3's basis is irrelevant.
However, these are 90px and 150px respectively, but C3 is set to grow

If someone can import that View (copy json, create new View, paste JSON onto the new view with Shift+right click) and test on their system though, that would tell me if it's something in my system or not.. if could be, there's a lot of theme CSS.

@nminchin

This is the View JSON itself:

[Ryan_Deardorff]

The component will size to fill all of its contents, but if its containing component has other components that compete with it for space, then it will have scrollbars. Consider this case where the Flex is set to auto 1 1, and the button is set to 50% 0 0, and the width of the dropdown is too big for everything to fit:

[jlandwerlen]

@nminchin

If someone can import that View (copy json, create new View, paste JSON onto the new view with Shift+right click) and test on their system though, that would tell me if it's something in my system or not..

Hey Nick, this is what mine shows:

[nminchin]

@Ryan_Deardorff

Consider this case where the Flex is set to auto 1 1, and the button is set to 50% 0 0, and the width of the dropdown is too big for everything to fit

Of course, because shrink is now set to True. But with shrink off, it should never have scrollbars

@jlandwerlen

this is what mine shows

Looks like you have the bug as well, what version is that in?

[jlandwerlen]

8.1.47.
Are you sure this is a bug?

[Ryan_Deardorff]

My example works the same even if shrink is 0. It has to, because the button set to 50% no shrink restricts the Flex to be only 50% of the parent container's width. The only way to control the existence of a scrollbar is with overflow.

[nminchin]

I think we're getting our wires crossed.

This started when considering this example:

OF_C1 has flex: 0 0 auto (grow:0, shrink:0, basis:auto) and is contained within OuterFlex. The components within OF_C1 are both set to fixed widths which sum to 100+90+5(1x gap) px=195px, and 0 grow/shrink. This means that OF_C1 should be auto-sized to 195px to fit its contents, and should not have scrollbars. It doesn't matter where OF_C1 exists, if it's in a flex container that is < 195px in width, OF_C1 should not have scrollbars; the parent flex would have scrollbars in this case.

In the case above though, the containing flex, OuterFlex, has enough room to fully contain all 3x components within it, so there shoudl be no scrollbars whatsoever

OF_C1 width evaluates to 195px
OF_C2 is set to flex: 0 0 150px
OF_C3 is set to flex: 1 1 150px

195+150+min(150)+10px(2x gaps) = 505px. OuterFlex is 790px wide so it has enough room to fully contain all 3 components without scrollbars

[dgillbee]

Hi Nick,

I imported your view and I see the same thing as you. It's like the basis isn't calculating the contents correctly. I've seen this on other objects before, but labels is surprising. I think you should raise this as a ticket with IA Support.

The question is, is this an Ignition issue or CSS?

You most likely already know this but, as grow and shrink are both set to 0. The basis is essentially a fixed width. If you set a manual min-width then the basis: auto respects the children's collective width.

min-width: 100px
min-width: 90px

Also, when setting the children as basis: auto the parent container also starts to respect the contents width. It seems specific for a fixed pixels basis.

[nminchin]

I found the better way to do this, rather than to set both basis and a width to the same value, to instead set basis to auto and then just set the width (I was just using style.width) to the fixed width you want. But yeah I'll probably raise it with support officially as it's quite annoying! Not to mention n00b-hostile