You can get "flex" action if you set a coordinate view props.mode : percent.
To reproduce paste this view into your Project Browser.
coordNumericEntryWidget
{
"custom": {},
"params": {
"caption": "Caption",
"value": 3.1416
},
"propConfig": {
"params.caption": {
"paramDirection": "input",
"persistent": true
},
"params.value": {
"paramDirection": "inout",
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 83,
"width": 465
}
},
"root": {
"children": [
{
"meta": {
"name": "lblBorder"
},
"position": {
"width": 1
},
"propConfig": {
"position.height": {
"binding": {
"config": {
"expression": "({view.props.defaultSize.height} - {this.props.style.marginTop})\r\n/ {view.props.defaultSize.height}"
},
"type": "expr"
}
}
},
"props": {
"style": {
"borderBottomLeftRadius": 10,
"borderBottomRightRadius": 10,
"borderColor": "#888282",
"borderStyle": "solid",
"borderTopLeftRadius": 10,
"borderTopRightRadius": 10,
"borderWidth": 1,
"marginTop": 10
}
},
"type": "ia.display.label"
},
{
"meta": {
"name": "txtNumericEntry"
},
"position": {
"height": 0.3556,
"width": 1,
"y": 0.4444
},
"propConfig": {
"props.value": {
"binding": {
"config": {
"bidirectional": true,
"path": "view.params.value"
},
"type": "property"
}
}
},
"props": {
"style": {
"marginLeft": 15,
"marginRight": 15
}
},
"type": "ia.input.numeric-entry-field"
},
{
"children": [
{
"meta": {
"name": "lblCaption"
},
"position": {
"shrink": 0
},
"propConfig": {
"props.text": {
"binding": {
"config": {
"path": "view.params.caption"
},
"type": "property"
}
}
},
"props": {
"style": {
"backgroundColor": "#f7f7f7",
"paddingLeft": 5,
"paddingRight": 5
}
},
"type": "ia.display.label"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"height": 1,
"width": 1
},
"props": {
"alignContent": "flex-start",
"alignItems": "flex-start",
"style": {
"paddingLeft": 15
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"mode": "percent"
},
"type": "ia.container.coord"
}
}```
The main trick in this is to convert coordinates to percentages. I've done this using an integer number of pixels divided by the view width or height. e.g.
20 / {view.props.defaultSize.width}
The caption is a view parameter. The value is also a parameter but set as bidirectional through the various views.
Have fun.