v8.1.23
I have a very simple test case that shows a flex container set to basis: auto
not working properly. The flex container has 2 labels inside of it, both with fixed-sized basis settings, but the flex container isn't sizing itself to accommodate the two labels. Labels are "96" and "kWh", json copied below.
This is how it displays embedded into a flex View:
If I set the labels' to basis: auto
then the flex container sizes properly. If I set one label to basis: auto
and one to fixed-size basis: 150px
, it doesn't size properly.
Flex container JSON
[
{
"type": "ia.container.flex",
"version": 0,
"props": {},
"meta": {
"name": "FlexContainer_2"
},
"position": {
"shrink": 0
},
"custom": {},
"children": [
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": 96
},
"meta": {
"name": "Label"
},
"position": {
"shrink": 0,
"basis": "50px"
},
"custom": {}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "kWh"
},
"meta": {
"name": "Label_0"
},
"position": {
"shrink": 0,
"basis": "55px"
},
"custom": {}
}
]
}
]
View JSON (includes flex container above)
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 98
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "Label"
},
"position": {
"basis": "80px",
"shrink": 0
},
"props": {
"text": 96
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Label_0"
},
"position": {
"basis": "50px",
"shrink": 0
},
"props": {
"text": "kWh"
},
"type": "ia.display.label"
}
],
"meta": {
"name": "FlexContainer_2"
},
"position": {
"shrink": 0
},
"props": {
"style": {
"gap": "50px"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"type": "ia.container.flex"
}
}