Challenge on perspective flex window formatting

Ignition
1

I would like to create a phone friendly popup, but face challenge on realizing the following requirements.
When in tablet mode, it is displayed like this:
image
When in narrowed phone mode, I would like to display like this:
image

Basically, when the window is narrowed, I would like to:

  1. stack the display
  2. auto scroll so the operator can use one finger to navigate up/down.

I tried multiple combination of flex/coordinate windows, still cannot get it right.
Appreciate if anyone can help out.

2

In your rows' flex containers try setting to wrap and set the position props on the label to
Shrink 0
Grow 1
Basis 300px

3

You are early mate.

I couldn't get it working.
Here's what it looks like when set to grow =1
The blue square is made by a label without text, dynamically changing background color by value.
image
image
Root setting:
image
Flex Container setting:

image
image342×668 29.4 KB

4

under this setting,
The label can stack when narrowing the window.
But because each flex container is set to grow, the height of each flex container will change to suit the current window height, without displaying the scroll bar.
image

5

I have to check when in the (home) office, but the rows should be set to auto and in that case you might also need to keep your squares square my forcing the height...

6

Just some interesting observations:

  1. by changing the flex container "Content" Setting from "Stretch" to "center", I can maintain the square size. But when narrowing the window and when the two items of the flex container wrap/stack, the sqare disappeared.
    image
    image348×541 24.9 KB

    image
  2. but if I enter letters in the label, it will remain displayed, see the difference between On/Off square.
    image
7

Try this
Flex Container Example.zip (2.9 KB)

Or copied here...

{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "width": 168
    }
  },
  "root": {
    "children": [
      {
        "children": [
          {
            "meta": {
              "name": "Label"
            },
            "position": {
              "basis": "24px",
              "shrink": 0
            },
            "props": {
              "style": {
                "backgroundColor": "#82EEBB",
                "borderBottomLeftRadius": "4px",
                "borderBottomRightRadius": "4px",
                "borderTopLeftRadius": "4px",
                "borderTopRightRadius": "4px",
                "height": "24px",
                "margin": "10px",
                "marginLeft": 0
              }
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "basis": "150px",
              "grow": 1
            },
            "props": {
              "text": "Simulated"
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "wrap": "wrap"
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "paddingLeft": "10px"
      }
    },
    "type": "ia.container.flex"
  }
}
8

Just tried the following setting change. It now works as I want it.

  1. Root change "Children" from "Wrap" to "Don't Wrap".
  2. all flex container overflow change to "visible"

Now the only issue is I have to enter text to the label to make it visible when wrap/stack.
What's the reason behind it to make it invisible when wrap and there's no text in the label?
And how to fix it? Square of status 4 is invisible if there's no text on it. See below screenshot.

image
image304×623 17.1 KB

image

image

9

I think you've overcomplicated it. If you don't want the scrollbars on the text, then you can always use the word-wrap: break-word property:
image

image

image

{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "width": 70
    }
  },
  "root": {
    "children": [
      {
        "children": [
          {
            "meta": {
              "name": "Label"
            },
            "position": {
              "basis": "24px",
              "shrink": 0
            },
            "props": {
              "style": {
                "backgroundColor": "#82EEBB",
                "borderBottomLeftRadius": "4px",
                "borderBottomRightRadius": "4px",
                "borderTopLeftRadius": "4px",
                "borderTopRightRadius": "4px",
                "height": "24px",
                "margin": "10px",
                "marginLeft": 0
              }
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "basis": "150px",
              "grow": 1
            },
            "props": {
              "style": {
                "wordWrap": "break-word"
              },
              "text": "Simulated and Broken"
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "wrap": "wrap"
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "paddingLeft": "10px"
      }
    },
    "type": "ia.container.flex"
  }
}
10

Thanks. It works out great.

Also found the issue why the label without text will disappear when wrap. The height is not forced to certain value. Once set, it works well.

11

Yep.
Consider the square inside the row flex container: the only reason the square has a width is because you give it a fixed basis; if you set it to auto, it would collapse to 0.

The root is a column flex and your rows are set to auto basis (height). Hence, the components will auto height, and wrapped components will auto to the min height for each row in the wrap. An empty-text Label has a min height of 0 unless you tell it what it should be

1 Like