node-red-dashboard icon indicating copy to clipboard operation
node-red-dashboard copied to clipboard

UI Text node does not render text correctly from payloads

Open houser42 opened this issue 1 year ago • 2 comments

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": Screenshot 2024-10-03 at 16 36 17

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

houser42 avatar Oct 03 '24 14:10 houser42

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 avatar Oct 03 '24 18:10 joepavitt

@joepavitt Yes, the issue was exactly with the line-height Created a PR https://github.com/FlowFuse/node-red-dashboard/pull/1359

gayanSandamal avatar Oct 04 '24 06:10 gayanSandamal