Ui_template size overlap

Dashboard
1

Hi,

1st situation:

I have 7 groups on dashboard, size of all groups are the same (6). See picture.

all_6
all_6.jpg1366×768 111 KB

2nd situation:

Again, 7 groups, but one group size is 7(intrusion), and all other group size are 6. In this case on dashboard I have overlap. See picture.

intrusion_7_other_6
intrusion_7_other_6.jpg1366×768 109 KB

Is this normal or a bug?

2

How about providing your flow so someone can look at what you actually have coded?

3

Thank you for asking this question. I had the same problem of groups overlapping. I thought this is by design (maybe NR just can't calculate group covered surface).

So far I workaround this problem by careful alignment of group sizes (WxH) and their sequence (location). Annoying, less intuitive to end user, but works...

4

It’s a known bug - https://github.com/node-red/node-red-dashboard/issues/249
having a mix of group widths is best avoided if possible. (Unless you are setting them to be first or last)

5

Hi, excuse because of late response (I was not able to use PC) ...

Thanks igrowing and dceejay.
It is solved by inserting empty spaces into the template. I hope the bug will be solved.

Also for zenofmud, I attach the flow, may be useful to somebody.

Regards!

[
    {
        "id": "2fa3db04.096184",
        "type": "tab",
        "label": "example",
        "disabled": false,
        "info": ""
    },
    {
        "id": "ef4b84d9.36bd68",
        "type": "ui_template",
        "z": "2fa3db04.096184",
        "group": "1dd8801.d68108",
        "name": "ui_example",
        "order": 1,
        "width": "10",
        "height": "2",
        "format": "<div layout=\"row\" layout-align=\"space-between\">\n<p>{{msg.input_name}}</p>\n<p style=\"color:{{msg.txt_color}}; background-color:{{msg.bkg_txt_color}}\">{{msg.state}}</p>\n</div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 670,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "725e9a53.2c2324",
        "type": "inject",
        "z": "2fa3db04.096184",
        "name": "state_1",
        "topic": "",
        "payload": "{\"msg.input_name\":\"Input 1\",\"msg.state\":\"OK\",\"msg.txt_color\":\"green\",\"msg.bkg_txt_color\":\"yellow\"}",
        "payloadType": "json",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 130,
        "y": 160,
        "wires": [
            [
                "2aafa004.1460c"
            ]
        ]
    },
    {
        "id": "2aafa004.1460c",
        "type": "change",
        "z": "2fa3db04.096184",
        "name": "change msg properties by (move)",
        "rules": [
            {
                "t": "move",
                "p": "payload[\"msg.input_name\"]",
                "pt": "msg",
                "to": "input_name",
                "tot": "msg"
            },
            {
                "t": "move",
                "p": "payload[\"msg.state\"]",
                "pt": "msg",
                "to": "state",
                "tot": "msg"
            },
            {
                "t": "move",
                "p": "payload[\"msg.txt_color\"]",
                "pt": "msg",
                "to": "txt_color",
                "tot": "msg"
            },
            {
                "t": "move",
                "p": "payload[\"msg.bkg_txt_color\"]",
                "pt": "msg",
                "to": "bkg_txt_color",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 420,
        "y": 180,
        "wires": [
            [
                "ef4b84d9.36bd68"
            ]
        ]
    },
    {
        "id": "8b0ec944.4503c8",
        "type": "inject",
        "z": "2fa3db04.096184",
        "name": "state_2",
        "topic": "",
        "payload": "{\"msg.input_name\":\"Input 1\",\"msg.state\":\"ALARM\",\"msg.txt_color\":\"red\",\"msg.bkg_txt_color\":\"lightgray\"}",
        "payloadType": "json",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 130,
        "y": 200,
        "wires": [
            [
                "2aafa004.1460c"
            ]
        ]
    },
    {
        "id": "5fdb86c.48c8f78",
        "type": "ui_button",
        "z": "2fa3db04.096184",
        "name": "",
        "group": "1dd8801.d68108",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "OK status",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "{\"msg.input_name\":\"Input 1\",\"msg.state\":\"OK\",\"msg.txt_color\":\"green\",\"msg.bkg_txt_color\":\"yellow\"}",
        "payloadType": "json",
        "topic": "",
        "x": 120,
        "y": 60,
        "wires": [
            [
                "2aafa004.1460c"
            ]
        ]
    },
    {
        "id": "9a636476.ef81d8",
        "type": "ui_button",
        "z": "2fa3db04.096184",
        "name": "",
        "group": "1dd8801.d68108",
        "order": 4,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "ALARM status",
        "color": "",
        "bgcolor": "",
        "icon": "",
        "payload": "{\"msg.input_name\":\"Input 1\",\"msg.state\":\"ALARM\",\"msg.txt_color\":\"red\",\"msg.bkg_txt_color\":\"lightgray\"}",
        "payloadType": "json",
        "topic": "",
        "x": 100,
        "y": 100,
        "wires": [
            [
                "2aafa004.1460c"
            ]
        ]
    },
    {
        "id": "fa820bed.6227a8",
        "type": "ui_text",
        "z": "2fa3db04.096184",
        "group": "1dd8801.d68108",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Click to change status in ui_template",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "x": 170,
        "y": 280,
        "wires": []
    },
    {
        "id": "1dd8801.d68108",
        "type": "ui_group",
        "z": "",
        "name": "I/O state example",
        "tab": "777f6f4e.d0e41",
        "disp": true,
        "width": "10",
        "collapse": false
    },
    {
        "id": "777f6f4e.d0e41",
        "type": "ui_tab",
        "z": "",
        "name": "test",
        "icon": "dashboard"
    }
]

Capture

6

Any expectation for fix?

7

I don’t know - how’s your logic/maths ? :slight_smile:

8

Logic/maths is not enough to fix such bug: Web-UI development experience required.
From non-experienced view the bug might be in file https://github.com/node-red/node-red-dashboard/blob/master/src/components/ui-card-panel/ui-masonry.js

I could raise this gauntlet with some guidance in node.js.
Feasible?