# Issue with Rotated Label in Flex Container **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [March 13, 2025, 6:20pm UTC](https://forum.inductiveautomation.com/t/issue-with-rotated-label-in-flex-container/103652 "2025-03-13T18:20:47Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\ **Post date:** [March 13, 2025, 6:20pm UTC](https://forum.inductiveautomation.com/t/issue-with-rotated-label-in-flex-container/103652/1 "2025-03-13T18:20:47Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/626043dbe1647e641cc11e997647d02efae59189.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 13, 2025, 7:38pm UTC](https://forum.inductiveautomation.com/t/issue-with-rotated-label-in-flex-container/103652/2 "2025-03-13T19:38:59Z")
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](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831). That way we can quickly reproduce the problem. ---
**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\ **Post date:** [March 13, 2025, 9:28pm UTC](https://forum.inductiveautomation.com/t/issue-with-rotated-label-in-flex-container/103652/3 "2025-03-13T21:28:32Z")
`{"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}}}}` ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 13, 2025, 10:13pm UTC](https://forum.inductiveautomation.com/t/issue-with-rotated-label-in-flex-container/103652/4 "2025-03-13T22:13:42Z")
You've posted (a badly formatted version of) this: ```python { "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. ---
**Author:** ![alikhan9347921](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@alikhan9347921](https://forum.inductiveautomation.com/u/alikhan9347921)\ **Post date:** [March 14, 2025, 7:48pm UTC](https://forum.inductiveautomation.com/t/issue-with-rotated-label-in-flex-container/103652/5 "2025-03-14T19:48:17Z")
```python [ { "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" } } } } ] ``` ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 14, 2025, 7:57pm UTC](https://forum.inductiveautomation.com/t/issue-with-rotated-label-in-flex-container/103652/6 "2025-03-14T19:57:56Z")
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?