UI Text node does not render text correctly from payloads
Current Behavior
Example attached: setting a UI Text node to font size 72 will not render outside of one row of tiles even if the text field has more rows.
The label field renders correctly and the payload field appears to change size correctly but is not visible outside one line. It looks like this when sending a string "payload size":
Expected Behavior
Text should render to available rows, as does the label.
Steps To Reproduce
Inject node and text node to replicate;
[
{
"id": "2f6e9e78d20dd769",
"type": "ui-text",
"z": "796f3b88e7b62f92",
"group": "abd66337a03c3786",
"order": 1,
"width": "17",
"height": "5",
"name": "test size",
"label": "label size ",
"format": "",
"layout": "row-center",
"style": true,
"font": "Arial,Arial,Helvetica,sans-serif",
"fontSize": "72",
"color": "#ffffff",
"className": "",
"x": 560,
"y": 280,
"wires": []
},
{
"id": "43aafe37e3bb9881",
"type": "inject",
"z": "796f3b88e7b62f92",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "payload size",
"payloadType": "str",
"x": 250,
"y": 260,
"wires": [
[
"2f6e9e78d20dd769"
]
]
},
{
"id": "abd66337a03c3786",
"type": "ui-group",
"name": "g1",
"page": "93df70a8e08be29e",
"width": "30",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "93df70a8e08be29e",
"type": "ui-page",
"name": "test git p1",
"ui": "cd62f850b848415c",
"path": "/page18",
"icon": "home",
"layout": "grid",
"theme": "404b2b83a6155d6c",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 17,
"className": "",
"visible": true,
"disabled": false
},
{
"id": "cd62f850b848415c",
"type": "ui-base",
"name": "flax 24",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"showPageTitle": false,
"navigationStyle": "none",
"titleBarStyle": "hidden"
},
{
"id": "404b2b83a6155d6c",
"type": "ui-theme",
"name": "dark jtm",
"colors": {
"surface": "#000000",
"primary": "#0094ce",
"bgPage": "#000000",
"groupBg": "#000000",
"groupOutline": "#000000"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px",
"density": "comfortable"
}
}
]```
### Environment
- Dashboard version:
- Node-RED version: 4.0.2
- Node.js version:
- npm version:
- Platform/OS: Ubuntu
- Browser: any browser on Mac.
### Have you provided an initial effort estimate for this issue?
I am not a FlowFuse team member
Ooh that's funky, I suspect this is an issue with the line-height not being set properly. @gayanSandamal can you take a look please?
@joepavitt Yes, the issue was exactly with the line-height
Created a PR https://github.com/FlowFuse/node-red-dashboard/pull/1359