Issue with Rotated Label in Flex Container

Ignition
1

Hi all,

I'm using a Flex Container with an icon and a label, each set to 50% basis. I’ve rotated the label 90 degrees to display it vertically. The issue is:

  • When the label has two digits, it displays correctly.
  • With three digits, the last digit gets cut off.
  • Adjusting the basis or shrinking the container doesn’t help.
  • Adding marginBottom causes the label to merge with the icon.

Additionally I want the the label text remains medium in size.

Any suggestions on how to fix this?

Please see the attached image.

image
image238×203 19.1 KB

2

Welcome to the forum.
Find the container in Project Browser, right-click, copy and paste in here and format it using the </> button as explained in Wiki - how to post code on this forum. That way we can quickly reproduce the problem.

3

{"type":"view","payload":{"view":{"path":"Embedded/station/_stageToDel/Line","width":21.0,"height":85.0,"params":{"detail":"value","line":"FNL","name":"FNL_140","state":"value","stateColor":"#09B75A","stationID":155}}}}

4

You've posted (a badly formatted version of) this:

{
    "type": "view",
    "payload": {
        "view": {
            "path": "Embedded/station/_stageToDel/Line",
            "width": 21,
            "height": 85,
            "params": {
                "detail": "value",
                "line": "FNL",
                "name": "FNL_140",
                "state": "value",
                "stateColor": "#09B75A",
                "stationID": 155
            }
        }
    }
}

You've copied the configuration for an Embedded View component. We need the the code for the actual embedded view, Open the view, "Embedded/station/_stageToDel/Line" and copy that over. Review the "How to post code" tutorial again and check it's formatted properly before hitting Reply.
Thanks.

5 
[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "direction": "column",
      "style": {
        "overflow": "hidden"
      }
    },
    "meta": {
      "tooltip": {},
      "name": "root"
    },
    "position": {},
    "custom": {},
    "children": [
      {
        "type": "ia.display.icon",
        "version": 0,
        "props": {
          "color": "#000000"
        },
        "meta": {
          "name": "Icon"
        },
        "position": {
          "shrink": 0,
          "basis": "50%"
        },
        "custom": {},
        "propConfig": {
          "props.style.backgroundColor": {
            "binding": {
              "type": "property",
              "config": {
                "path": "view.params.stateColor"
              }
            }
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "textStyle": {
            "marginBottom": "90%",
            "rotate": "90deg",
            "textAlign": "left"
          },
          "style": {
            "classes": "Label/text-medium",
            "color": "--neutral-60"
          }
        },
        "meta": {
          "name": "Label"
        },
        "position": {
          "shrink": 0,
          "basis": "50%"
        },
        "custom": {},
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "view.params.name"
              },
              "transforms": [
                {
                  "expression": "try \r\n\t(split(split({value}, \"_\")[1,0],(\"-|_0|STA|SM|OPMODE|RT|PT|ASM|ST00\"))[1,0], split({value}, \"_\")[1,0])\r\n\r\n//split(\"STA010\",\"(_0|STA0|STA|RT|ASM|ST00)\")[0,0]\r\n",
                  "type": "expression"
                },
                {
                  "formatType": "numeric",
                  "formatValue": "number",
                  "type": "format"
                }
              ],
              "type": "property"
            }
          }
        }
      }
    ],
    "propConfig": {
      "custom.stateColor": {
        "binding": {
          "config": {
            "expression": "//lookup({Tesla/Line/StateDefinition},{view.params.state},\"#00000\",\"id\",\"color\")\r\n{view.params.stateColor}"
          },
          "type": "expr"
        }
      },
      "meta.tooltip.text": {
        "binding": {
          "config": {
            "expression": "\"Details: \"+{view.params.detail}+\" \\nState: \" +{view.params.stateName}"
          },
          "type": "expr"
        }
      }
    }
  }
]
6

Thanks for that but the parameters for the view are missing and so the view won't render.

Can you create a simple view without parameters that demonstrates the problem?