[Bug-416]Flex container not shrinking at runtime

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"
  }
}
1 Like

Bad news: I can’t explain the root cause as of yet, but I am able to replicate the issue.
Good news: I CAN tell you that this is purely confined to the Docked View; I used an Embedded View within a primary view and watched your View collapse/expand as expected. This also means your approach was correct.

I’ve reached out to Dev to take a look at the cause, but we’re extremely busy wrapping up a few things before ICC this coming Monday. Due to a development crunch and the conference itself there’s a very good chance that a Dev member won’t be able to weigh in until possibly the 21st.

1 Like

Thanks! The good news is that this machine is controlled by an iPad, so as long as I make it look right on that device, the grow/shrink scaling won’t actually come into play and won’t be a pressing issue. I’m just trying to get this application properly responsive to make life easy for future me, so if there’s a fix coming somewhere down the track, great!