I have a dock 300px wide and 800px tall (default), with a flex root container. The flex root container is in column mode, with justify set to “space between”.
There are three more flex containers in the root container. My intention is that the top container retain its size at all times, and always be shown at the top of the dock. The bottom container should be shown at the bottom of the dock, and should generally maintain its size. The middle container should grow and shrink to fill the available screen height. This all works OK.
However, I want to make an improvement. If the middle container shrinks down to a minimum size, I want it to stop shrinking, and the bottom container to shrink instead. To achieve this, I set the containers as follows:
Top container - basis 90px; grow 0; shrink 0
Middle container - basis 200px (i.e. minimum size); grow 1; shrink 0
Bottom container - basis 300px (i.e. normal size); grow 0; shrink 1
In the designer, this works. If I shrink the height of the view down, the first thing that happens is that the middle container shrinks until it reaches minimum size. If I keep shrinking the view, the bottom container starts to shrink. But when I run a session (firefox), the bottom container never shrinks. Instead, once the middle container reaches minimum size, I get scroll bars.
What am I missing here?
Further information: the container that doesn’t shrink is a flex container in column mode. It contains two components: a label and an embedded view. The label is set to grow 0, shrink 0. The embedded view is a coordinate view set to percent mode. It is set to grow 0, shrink 1. The idea is that the label does not shrink, only the graphic (embedded view) below it.
View JSON code:
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 751,
"width": 300
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "Header"
},
"position": {
"basis": "20px"
},
"props": {
"style": {
"classes": "Text_Default",
"fontSize": "12px",
"marginTop": 10,
"textAlign": "center"
},
"text": "Current Temp"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Data"
},
"position": {
"basis": "50px"
},
"propConfig": {
"props.text": {
"binding": {
"config": {
"expression": "{[default]Analogs/LC_LRT/Scaled}+\"°C\""
},
"enabled": false,
"type": "expr"
}
}
},
"props": {
"style": {
"classes": "Text_Default",
"fontSize": "50px",
"marginTop": 5,
"textAlign": "center"
},
"text": "??°C"
},
"type": "ia.display.label"
}
],
"meta": {
"name": "Current Temp"
},
"position": {
"basis": "90px",
"shrink": 0
},
"props": {
"alignItems": "center",
"direction": "column",
"style": {
"overflow": "visible"
}
},
"type": "ia.container.flex"
},
{
"children": [
{
"meta": {
"name": "Header"
},
"position": {
"basis": "40 px"
},
"props": {
"style": {
"classes": "Text_Header",
"cursor": "auto",
"paddingBottom": 10,
"paddingTop": 10
},
"text": "Pre-Cooling"
},
"type": "ia.display.label"
},
{
"children": [
{
"meta": {
"name": "Progress Indicator"
},
"position": {
"height": 1,
"width": 1
},
"propConfig": {
"props.value": {
"binding": {
"config": {
"fallbackDelay": 2.5,
"mode": "direct",
"tagPath": "[default]Operation/CoolingTime_PercentComplete"
},
"enabled": false,
"type": "tag"
}
}
},
"props": {
"arc": {
"color": "#35E99C",
"width": 4
},
"arcBackground": {
"color": "#FF8A8A",
"opacity": 1
},
"endAngle": 630,
"label": {
"maxDecimal": 0,
"size": 0,
"visible": false
},
"startAngle": 270,
"style": {
"classes": []
},
"value": 50
},
"type": "ia.chart.simple-gauge"
},
{
"meta": {
"name": "Complete"
},
"position": {
"height": 1,
"width": 1
},
"propConfig": {
"meta.visible": {
"binding": {
"config": {
"fallbackDelay": 2.5,
"mode": "direct",
"tagPath": "[default]Operation/LC_LRT_CoolingDone"
},
"type": "tag"
}
}
},
"props": {
"elements": [
{
"cx": "50%",
"cy": "50%",
"fill": "#22EB9A",
"name": "circle",
"r": "27%",
"stroke": {
"opacity": 1,
"paint": "#22EB9A",
"width": 1
},
"style": {},
"type": "circle"
}
],
"style": {
"opacity": 1.0000000000000002,
"overflow": "visible"
},
"viewBox": "0 0 100% 100%"
},
"type": "ia.shapes.svg"
},
{
"events": {
"dom": {
"onClick": {
"config": {
"script": "\tif not system.tag.read(\"[default]Operation/Global_PrecoolRun\").value:\n\t\tsystem.tag.write(\"[default]Operation/SCADA_PB_PrecoolStart\",1)\n\telif not system.tag.read(\"[default]Operation/Global_PrecoolDone\").value:\n\t\tsystem.perspective.popup(\"PrecoolStopConf\",\"Popups/Precool Stop Confirmation\")"
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "Label"
},
"position": {
"height": 0.7,
"width": 0.48,
"x": 0.26,
"y": 0.15
},
"propConfig": {
"props.style.color": {
"binding": {
"config": {
"fallbackDelay": 2.5,
"mode": "direct",
"tagPath": "[default]Operation/LC_LRT_CoolingDone"
},
"enabled": false,
"transforms": [
{
"fallback": "#000000",
"inputType": "scalar",
"mappings": [
{
"input": true,
"output": "#FFFFFF"
}
],
"outputType": "color",
"type": "map"
}
],
"type": "tag"
}
},
"props.text": {
"binding": {
"config": {
"expression": "if({[default]Operation/Global_PrecoolRun},\r\nif({[default]Operation/LC_LRT_CoolingDone},\"Ready\",\"Stop\"),\r\n\"Start\")"
},
"enabled": false,
"type": "expr"
}
}
},
"props": {
"style": {
"classes": "Text_Default",
"color": "#000000",
"cursor": "auto",
"font-size": 20,
"fontWeight": "bolder",
"text-align": "center"
},
"text": "Start"
},
"type": "ia.display.label"
}
],
"meta": {
"name": "Controls"
},
"position": {
"basis": "180px"
},
"props": {
"mode": "percent",
"style": {
"overflow": "visible"
}
},
"type": "ia.container.coord"
},
{
"children": [
{
"meta": {
"name": "Header"
},
"position": {
"basis": "30px",
"shrink": 0
},
"props": {
"style": {
"classes": "Text_Default",
"color": "#D5D5D5",
"textAlign": "center"
},
"text": "Time Remaining"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Value"
},
"position": {
"basis": "30px",
"shrink": 0
},
"propConfig": {
"props.text": {
"binding": {
"config": {
"expression": "toString({[default]Operation/CoolingTime_MMSS_Min})+\"m \"+\r\nnumberFormat({[default]Operation/CoolingTime_MMSS_Sec},\"00\")+\"s\""
},
"enabled": false,
"type": "expr"
}
}
},
"props": {
"style": {
"classes": "Text_Header",
"font-size": "30px",
"textAlign": "center"
},
"text": "??m ??s"
},
"type": "ia.display.label"
}
],
"meta": {
"name": "Time Left"
},
"position": {
"basis": "100px"
},
"props": {
"direction": "column",
"justify": "center",
"style": {
"marginBottom": "10px",
"overflow": "visible"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "Precooling"
},
"position": {
"basis": "230px",
"grow": 1,
"shrink": 0
},
"props": {
"direction": "column",
"justify": "space-between",
"style": {
"border-bottom": "1px solid #D5D5D5",
"border-top": "1px solid #D5D5D5",
"marginLeft": 20,
"marginRight": 20,
"overflow": "visible"
}
},
"type": "ia.container.flex"
},
{
"children": [
{
"meta": {
"name": "Header"
},
"position": {
"basis": "40 px",
"shrink": 0
},
"props": {
"style": {
"classes": "Text_Header",
"cursor": "auto",
"paddingBottom": 10,
"paddingTop": 10
},
"text": "Process"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Process Status"
},
"position": {
"basis": "195px"
},
"props": {
"path": "Templates/Process Components/ProcessState",
"style": {
"marginLeft": 20,
"marginRight": 20,
"overflow": "visible"
}
},
"type": "ia.display.view"
}
],
"meta": {
"name": "Process"
},
"position": {
"basis": "235px"
},
"props": {
"direction": "column",
"style": {
"overflow": "visible"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column",
"justify": "space-between",
"style": {
"border-left": "1px solid #D5D5D5",
"borderColor": "#D5D5D5",
"borderWidth": "1 px",
"marginBottom": 20,
"marginTop": 20,
"overflow": "visible"
}
},
"type": "ia.container.flex"
}
}