# Dashboard 2 not handling item sizing or custom labels as expected

**URL:** <https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [25 April 2024 20:32 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499 "2024-04-25T20:32:04Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![kocherjj](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kocherjj/32/20578_2.png) [@kocherjj](https://discourse.nodered.org/u/kocherjj)\
**Post date:** [25 April 2024 20:32 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/1 "2024-04-25T20:32:04Z")

</div>

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

```auto
[
    {
        "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.)

```auto
[
    {
        "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](https://dashboard.flowfuse.com/about.html) 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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 April 2024 21:15 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/2 "2024-04-25T21:15:38Z")

</div>

> [@kocherjj](#):
>
> 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}}'

This is not possible yet - see related post made just recently: [Specify key for ui-text - #2 by Steve-Mcl](https://discourse.nodered.org/t/specify-key-for-ui-text/87497/2)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [26 April 2024 09:45 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/3 "2024-04-26T09:45:01Z")

</div>

> [@kocherjj](#):
>
> 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.

The default layout in Dashboard is called the ["Grid" layout](https://dashboard.flowfuse.com/layouts/types/grid.html), 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"](https://dashboard.flowfuse.com/layouts/types/fixed.html) in Dashboard 2.0, which will behave more like what you're used to.

---

<div class="post-metadata">

**Author:** ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)\
**Post date:** [27 April 2024 18:56 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/4 "2024-04-27T18:56:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [30 April 2024 08:47 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/5 "2024-04-30T08:47:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 April 2024 12:02 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/6 "2024-04-30T12:02:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [30 April 2024 12:14 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/7 "2024-04-30T12:14:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [30 April 2024 13:57 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/8 "2024-04-30T13:57:30Z")

</div>

> [@kevinGodell](#):
>
> minmax(45px, auto)

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?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [1 May 2024 08:08 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/9 "2024-05-01T08:08:25Z")

</div>

> [@TotallyInformation](#):
>
> If allowing 2019+ or so, you could use a calculated max value - possibly based on the viewport height?

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

> [@TotallyInformation](#):
>
> e.g. EM or REM rather than PX?

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 May 2024 14:22 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/10 "2024-05-01T14:22:53Z")

</div>

> [@joepavitt](#):
>
> > [@TotallyInformation](#):
> >
> > If allowing 2019+ or so, you could use a calculated max value - possibly based on the viewport height?
> 
> Naive to any content that is longer than the viewport though?

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.

> [@joepavitt](#):
>
> > [@TotallyInformation](#):
> >
> > e.g. EM or REM rather than PX?
> 
> This is just relative to font-size, not relevant to the window resizing.

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.

---

<div class="post-metadata">

**Author:** ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)\
**Post date:** [3 May 2024 00:07 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/11 "2024-05-03T00:07:20Z")

</div>

Just wanted to follow up that I was able to solve my issue with css in regards to [replaced elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element). 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:

```auto
: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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [2 June 2024 00:07 UTC](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/12 "2024-06-02T00:07:31Z")

</div>

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