What is the best way to accomplish the following, I have two items, in photo #1 the yellow area is the container, the blue area is always present, the orange area is present only as needed. When the orange is present I want the container to increase size to fit both blue and orange areas. When the orange area is not present, I want the container to shrink, as show in photo #2. I have tried several combinations of the flex container and settings, but nothing seems to work. I’m using the display property as shown in photo #3 for the orange area
Is this possible?
Photo #1
Photo #2
Photo #3
There’s probably a better way to do this, but the quickest way that comes to mind is binding the height or basis of whatever the encompassing container is to values which are based on the display state of the component you want to add/remove. This is dependent on the container in use (yellow) being within a Flex Container itself.
if({./Label_0.position.display}, "140px", "90px")
This binding is set on the basis prop of a Flex Container and looks at a child component “Label”, and if that component is not displayed then the component uses a different ``value for basis.
Thanks @cmallonee, I tried that and it didn’t work, but perhaps I fumbled something. I will try again.
The only way I could get it to work was bind the root container height property. Binding the basis property on encompassing flex container did change it’s size, but the root container stayed the same size which defeats the purpose.
While I got something to work, if anyone has a better method please let me know.
Ah, I probably should also have mentioned that the Flex Container which contained the inner pieces was itself contained within a Flex Container (in “column” mode).
Do you mind attaching your example so I can import? I did exactly as you had laid out and it doesn’t work for me.
I can’t add zip file in this forum (i haven’t rights yet), but you can copy this JSON and right click on a new view with shift key pressed, and click paste JSON.
{
"custom": {},
"params": {
"extend": true
},
"propConfig": {
"params.extend": {
"paramDirection": "input",
"persistent": true
}
},
"props": {
"defaultSize": {
"height": "auto",
"width": 500
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "BlueArea"
},
"position": {
"basis": "50px",
"shrink": 0
},
"props": {
"style": {
"backgroundColor": "#656DD9",
"borderColor": "#000000",
"borderStyle": "solid",
"borderWidth": 1
}
},
"type": "ia.container.flex"
},
{
"meta": {
"name": "OrangeArea"
},
"position": {
"basis": "50px",
"shrink": 0
},
"propConfig": {
"position.display": {
"binding": {
"config": {
"path": "view.params.extend"
},
"type": "property"
}
}
},
"props": {
"style": {
"backgroundColor": "#D9AF65",
"borderColor": "#000000",
"borderStyle": "solid",
"borderWidth": 1
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "Content"
},
"position": {
"shrink": 0
},
"props": {
"direction": "column",
"style": {
"borderColor": "#EC8219",
"borderStyle": "solid",
"borderWidth": 4,
"overflow": "visible"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column",
"style": {
"overflow": "visible"
}
},
"type": "ia.container.flex"
}
}
2 Likes
Thanks. That doesn’t work for me either. If I take that view and drop it in another view, the size doesn’t increase, it just shows scroll bars. I’m on 8.1.16.
Just set overflow to visible on the view that you have dropped.
Thanks, ultimately this will be going in a flex repeater and it works as-is in that without needing to set overflow. I should have tested in that first. Appreciate the help.
To add, I was leaving off setting the view height to auto. In my testing, if that isn’t set to auto then it will not work. The screenshots didn’t show set to auto, but the JSON did.
Pleasure to help. Regards
