Dashboard 2 not handling item sizing or custom labels as expected

Dashboard
1

I have a large number of Dashboards running various things and finally decided to experiment with migrating to v2 and have run into some pretty basic issues right away.

I started with a simple Subnet calculator I built as a teaching tool.

I cannot attach the entire flow due to the character limit, but here is the flow for a single octet

[
    {
        "id": "641e26a848995539",
        "type": "ui_switch",
        "z": "232d0a51900732b4",
        "name": "Bit 1",
        "label": "",
        "tooltip": "",
        "group": "758a09d79b4812b9",
        "order": 10,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "1",
        "topicType": "str",
        "style": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radio_button_checked",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radio_button_unchecked",
        "offcolor": "black",
        "animate": true,
        "className": "",
        "x": 490,
        "y": 180,
        "wires": [
            [
                "ad821688569cc99d"
            ]
        ]
    },
    {
        "id": "9f079a98b708ae1c",
        "type": "ui_switch",
        "z": "232d0a51900732b4",
        "name": "Bit 2",
        "label": "",
        "tooltip": "",
        "group": "758a09d79b4812b9",
        "order": 11,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "2",
        "topicType": "str",
        "style": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radio_button_checked",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radio_button_unchecked",
        "offcolor": "black",
        "animate": true,
        "className": "",
        "x": 490,
        "y": 240,
        "wires": [
            [
                "3ac449ef746e5a63"
            ]
        ]
    },
    {
        "id": "f0cb5e6e7d77f161",
        "type": "ui_switch",
        "z": "232d0a51900732b4",
        "name": "Bit 3",
        "label": "",
        "tooltip": "",
        "group": "758a09d79b4812b9",
        "order": 12,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "3",
        "topicType": "str",
        "style": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radio_button_checked",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radio_button_unchecked",
        "offcolor": "black",
        "animate": true,
        "className": "",
        "x": 490,
        "y": 300,
        "wires": [
            [
                "2c43fc922f0b7b7f"
            ]
        ]
    },
    {
        "id": "355e8bd22b068843",
        "type": "ui_switch",
        "z": "232d0a51900732b4",
        "name": "Bit 4",
        "label": "",
        "tooltip": "",
        "group": "758a09d79b4812b9",
        "order": 13,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "4",
        "topicType": "str",
        "style": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radio_button_checked",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radio_button_unchecked",
        "offcolor": "black",
        "animate": true,
        "className": "",
        "x": 490,
        "y": 360,
        "wires": [
            [
                "4d62584125ebd251"
            ]
        ]
    },
    {
        "id": "b17aa7b56455f75c",
        "type": "ui_switch",
        "z": "232d0a51900732b4",
        "name": "Bit 6",
        "label": "",
        "tooltip": "",
        "group": "758a09d79b4812b9",
        "order": 15,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "6",
        "topicType": "str",
        "style": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radio_button_checked",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radio_button_unchecked",
        "offcolor": "black",
        "animate": true,
        "className": "",
        "x": 490,
        "y": 500,
        "wires": [
            [
                "f5af86d95aa29ba3"
            ]
        ]
    },
    {
        "id": "7fb064555aeb6f7f",
        "type": "ui_switch",
        "z": "232d0a51900732b4",
        "name": "Bit 7",
        "label": "",
        "tooltip": "",
        "group": "758a09d79b4812b9",
        "order": 16,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "7",
        "topicType": "str",
        "style": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radio_button_checked",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radio_button_unchecked",
        "offcolor": "black",
        "animate": true,
        "className": "",
        "x": 490,
        "y": 560,
        "wires": [
            [
                "16367840373e9efc"
            ]
        ]
    },
    {
        "id": "7d60310a0fc5d59d",
        "type": "ui_switch",
        "z": "232d0a51900732b4",
        "name": "Bit 8",
        "label": "",
        "tooltip": "",
        "group": "758a09d79b4812b9",
        "order": 17,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "8",
        "topicType": "str",
        "style": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radio_button_checked",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radio_button_unchecked",
        "offcolor": "black",
        "animate": true,
        "className": "",
        "x": 490,
        "y": 620,
        "wires": [
            [
                "a071a2700cee95e8"
            ]
        ]
    },
    {
        "id": "634e2e5a187bc878",
        "type": "ui_switch",
        "z": "232d0a51900732b4",
        "name": "Bit 5",
        "label": "",
        "tooltip": "",
        "group": "758a09d79b4812b9",
        "order": 14,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "5",
        "topicType": "str",
        "style": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radio_button_checked",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radio_button_unchecked",
        "offcolor": "black",
        "animate": true,
        "className": "",
        "x": 490,
        "y": 440,
        "wires": [
            [
                "23985967f3925792"
            ]
        ]
    },
    {
        "id": "ad821688569cc99d",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 1 State",
        "group": "758a09d79b4812b9",
        "order": 2,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "{{payload}}",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 670,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "3ac449ef746e5a63",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 2 State",
        "group": "758a09d79b4812b9",
        "order": 3,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "{{payload}}",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 670,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "2c43fc922f0b7b7f",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 3 State",
        "group": "758a09d79b4812b9",
        "order": 4,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "{{payload}}",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 670,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "4d62584125ebd251",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 4 State",
        "group": "758a09d79b4812b9",
        "order": 5,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "{{payload}}",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 670,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "23985967f3925792",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 5 State",
        "group": "758a09d79b4812b9",
        "order": 6,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "{{payload}}",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 670,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "f5af86d95aa29ba3",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 6 State",
        "group": "758a09d79b4812b9",
        "order": 7,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "{{payload}}",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 670,
        "y": 500,
        "wires": [
            []
        ]
    },
    {
        "id": "16367840373e9efc",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 7 State",
        "group": "758a09d79b4812b9",
        "order": 8,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "{{payload}}",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 670,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "a071a2700cee95e8",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 8 State",
        "group": "758a09d79b4812b9",
        "order": 9,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "{{payload}}",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 670,
        "y": 620,
        "wires": [
            []
        ]
    },
    {
        "id": "e30e1320f05ca901",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 1 Label",
        "group": "758a09d79b4812b9",
        "order": 18,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "128",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 850,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "1d30ca5a67c58452",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 2 Label",
        "group": "758a09d79b4812b9",
        "order": 19,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "64",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 850,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "1e0898bacb48610b",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 3 Label",
        "group": "758a09d79b4812b9",
        "order": 20,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "32",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 850,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "f1e8cf240e8028f8",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 4 Label",
        "group": "758a09d79b4812b9",
        "order": 21,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "16",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 850,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "81179a10c068c5e3",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 5 Label",
        "group": "758a09d79b4812b9",
        "order": 22,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "8",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 850,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "45c6c84cb451bbdf",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 6 Label",
        "group": "758a09d79b4812b9",
        "order": 23,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "4",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 850,
        "y": 500,
        "wires": [
            []
        ]
    },
    {
        "id": "a0e925dd65901e57",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 7 Label",
        "group": "758a09d79b4812b9",
        "order": 24,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "2",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 850,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "0d846b6c059e27f1",
        "type": "ui_button",
        "z": "232d0a51900732b4",
        "name": "Bit 8 Label",
        "group": "758a09d79b4812b9",
        "order": 25,
        "width": 1,
        "height": 1,
        "passthru": false,
        "label": "1",
        "tooltip": "",
        "color": "black",
        "bgcolor": "white",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 850,
        "y": 620,
        "wires": [
            []
        ]
    },
    {
        "id": "758a09d79b4812b9",
        "type": "ui_group",
        "name": "First Octet",
        "tab": "023bcd4502387203",
        "order": 1,
        "disp": true,
        "width": "8",
        "collapse": false,
        "className": ""
    },
    {
        "id": "023bcd4502387203",
        "type": "ui_tab",
        "name": "IPv4 Network Calculator - Toggle bits and adjust subnet slider to see network info",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

I have started building just one section of this and it is not turning out anything like the original in two obvious ways.

1: I am specifying item sizing but that is being ignored or at least modified. 1x1 gets stretched to roughly 3x1. This messes up the layout for everything rather badly.

2: With {{payload}} in the 'Label' field, none of my Dash v2 buttons show msg.payload as the label, but instead show the literal string '{{payload}}'

Here is what I think is the equivalent with Dashboard v2: ( The entire Octet puts me over my character limit but I'm attaching just 4 bits worth instead. It should be enough to see the discrepancies.)

[
    {
        "id": "fbc78ab6ec5e3b28",
        "type": "ui-switch",
        "z": "e249cd8411c1cc1e",
        "name": "Bit 1",
        "label": "",
        "group": "1452f60355896a3a",
        "order": 9,
        "width": "1",
        "height": "1",
        "passthru": true,
        "topic": "1",
        "topicType": "str",
        "style": "",
        "className": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radiobox-blank",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radiobox-marked",
        "offcolor": "black",
        "x": 410,
        "y": 200,
        "wires": [
            [
                "fac1d2a0290235d2"
            ]
        ]
    },
    {
        "id": "5d980d94f0f20250",
        "type": "ui-switch",
        "z": "e249cd8411c1cc1e",
        "name": "Bit 2",
        "label": "",
        "group": "1452f60355896a3a",
        "order": 10,
        "width": "1",
        "height": "1",
        "passthru": true,
        "topic": "2",
        "topicType": "str",
        "style": "",
        "className": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radiobox-blank",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radiobox-marked",
        "offcolor": "black",
        "x": 410,
        "y": 260,
        "wires": [
            [
                "08d69d088b84edaf"
            ]
        ]
    },
    {
        "id": "3320944c236c87a1",
        "type": "ui-switch",
        "z": "e249cd8411c1cc1e",
        "name": "Bit 3",
        "label": "",
        "group": "1452f60355896a3a",
        "order": 11,
        "width": "1",
        "height": "1",
        "passthru": true,
        "topic": "3",
        "topicType": "str",
        "style": "",
        "className": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radiobox-blank",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radiobox-marked",
        "offcolor": "black",
        "x": 410,
        "y": 320,
        "wires": [
            [
                "5c48cafa9ac2bf4d"
            ]
        ]
    },
    {
        "id": "7d097f2f77e33dbb",
        "type": "ui-switch",
        "z": "e249cd8411c1cc1e",
        "name": "Bit 4",
        "label": "",
        "group": "1452f60355896a3a",
        "order": 12,
        "width": "1",
        "height": "1",
        "passthru": true,
        "topic": "4",
        "topicType": "str",
        "style": "",
        "className": "",
        "onvalue": "1",
        "onvalueType": "num",
        "onicon": "radiobox-blank",
        "oncolor": "black",
        "offvalue": "0",
        "offvalueType": "num",
        "officon": "radiobox-marked",
        "offcolor": "black",
        "x": 410,
        "y": 380,
        "wires": [
            [
                "77c3de42a1dfcce5"
            ]
        ]
    },
    {
        "id": "fac1d2a0290235d2",
        "type": "ui-button",
        "z": "e249cd8411c1cc1e",
        "group": "1452f60355896a3a",
        "name": "Bit 1 State",
        "label": "{{payload}}",
        "order": 1,
        "width": "1",
        "height": "1",
        "passthru": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 590,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "08d69d088b84edaf",
        "type": "ui-button",
        "z": "e249cd8411c1cc1e",
        "group": "1452f60355896a3a",
        "name": "Bit 2 State",
        "label": "{{payload}}",
        "order": 2,
        "width": "1",
        "height": "1",
        "passthru": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 590,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "5c48cafa9ac2bf4d",
        "type": "ui-button",
        "z": "e249cd8411c1cc1e",
        "group": "1452f60355896a3a",
        "name": "Bit 3 State",
        "label": "{{payload}}",
        "order": 3,
        "width": "1",
        "height": "1",
        "passthru": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 590,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "77c3de42a1dfcce5",
        "type": "ui-button",
        "z": "e249cd8411c1cc1e",
        "group": "1452f60355896a3a",
        "name": "Bit 4 State",
        "label": "{{payload}}",
        "order": 4,
        "width": "1",
        "height": "1",
        "passthru": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 590,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "fc9fa9fba95be9f2",
        "type": "ui-button",
        "z": "e249cd8411c1cc1e",
        "group": "1452f60355896a3a",
        "name": "Bit 1 Label",
        "label": "128",
        "order": 17,
        "width": "1",
        "height": "1",
        "passthru": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 770,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "592fb1f98a4783b7",
        "type": "ui-button",
        "z": "e249cd8411c1cc1e",
        "group": "1452f60355896a3a",
        "name": "Bit 2 Label",
        "label": "64",
        "order": 18,
        "width": "1",
        "height": "1",
        "passthru": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 770,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "b601ec525061cb9a",
        "type": "ui-button",
        "z": "e249cd8411c1cc1e",
        "group": "1452f60355896a3a",
        "name": "Bit 3 Label",
        "label": "32",
        "order": 19,
        "width": "1",
        "height": "1",
        "passthru": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 770,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "2ca6eff91406be33",
        "type": "ui-button",
        "z": "e249cd8411c1cc1e",
        "group": "1452f60355896a3a",
        "name": "Bit 4 Label",
        "label": "16",
        "order": 20,
        "width": "1",
        "height": "1",
        "passthru": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 770,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "1452f60355896a3a",
        "type": "ui-group",
        "name": "First Octet",
        "page": "3980e0d9b7eb99c5",
        "width": "8",
        "height": "4",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "3980e0d9b7eb99c5",
        "type": "ui-page",
        "name": "IPv4 Network Calculator - Toggle bits and adjust subnet slider to see network info",
        "ui": "40e852968a9a2c81",
        "path": "/pageN",
        "icon": "home",
        "layout": "grid",
        "theme": "b7d8c0f01f800cf0",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "40e852968a9a2c81",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "b7d8c0f01f800cf0",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

I did look through the Dashboard v2 documentation here About Node-RED Dashboard 2.0 | Node-RED Dashboard 2.0 but did not see anything that seems relevant. Am I not understanding major differences between the two dashboards or should I be able to reproduce my V1 Dashboard in V2 but am doing something incorrectly?

2

This is not possible yet - see related post made just recently: Specify key for ui-text - #2 by Steve-Mcl

3

The default layout in Dashboard is called the "Grid" layout, which means that it will be 1 "column" wide, and 1 "row" high. This means that as your screen widens/shrinks, the width of a single column will change, and so a 1x1 element isn't necessarily square. This does meant though that all Dashboards using Grid are completely responsive down to mobile, which wasn't possible in Dashboard 1.0

The Dashboard 1.0 layout is renamed to "Fixed" in Dashboard 2.0, which will behave more like what you're used to.

1 Like
4

I have been struggling with the sizing issue for a little while when trying to migrate to dashboard 2.0. Even when using fixed on the new dashboard, it seems that the row height is what is tripping me up. It has a value of minmax(45px, auto) which is allowing my content to make the row grow taller. The old dashboard seemed to have fixed heights which allowed me to fill the space without distorting the layout.

5

Thanks for the feedback @kevinGodell - it's something we've gone back and forth on. Especially for ui-template and ui-markdown - I think we're steering towards the direction you're expecting, where we fix the height based on rows, overflow any content accordingly, but it does mean that it's not very responsive, e.g. a template/markdown node on mobile will render narrower, and therefore taller - so should we just be cutting that content off?

1 Like
6

Yes - that was the conclusion we came to with Dashboard 1 - If it auto resized it was too easy to make the whole layout move - and especially if you had highly dynamic data - then it could spend all day redrawing/resizing... and be totally unreadable.

1 Like
7

the big difference here though is that with D1.0, widths were fixed size, and so consequently, so was the height. With D2.0, and Grid/Notebook layouts, the width of an element will vary, and so in turn, so will the height required by it's content.

1 Like
8

Shouldn't that min value be in a responsive measure - e.g. EM or REM rather than PX?

Also, not sure what browser versions you are targeting with D2? If allowing 2019+ or so, you could use a calculated max value - possibly based on the viewport height?

1 Like
9

Naive to any content that is longer than the viewport though?

This is just relative to font-size, not relevant to the window resizing.

10

Yes, vh is the viewport height so if the max is set to 100vh that is the full height of the active browser window. Obviously you wouldn't want that which would leave you with the issue of how to calculate an appropriate height. So something like calc(100vh - <combined heights of things you don't want missing>).

Not saying this would be easy and I'm not entirely certain it would help in this specific case but certainly those kinds of calculations are driving many newer web UI's.

It IS, as far as I can see, indirectly relevant. It becomes relevant when a user zooms the interface or has accessibility settings for non-standard font sizes. At that point, any fixed pixel size calculations will now be wrong.

If we really want responsive and accessible interfaces, we need to use relative sizings as much as possible.

11

Just wanted to follow up that I was able to solve my issue with css in regards to replaced elements. Added an extra div as a container around the video element. Works as expected in all 3 of the dashboard 2.0 layout configurations. Thanks.
The relevant css that helped me for the custom element:

:host {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#container {
    position: relative;
    width: 100%;
    height: 100%;
}
#video {
    position: absolute;
    width: 100%;
    height: 100%;
}

The positions relative and absolute seemed to be key for it to work properly.

1 Like
12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.