# Ui\_template size overlap

**URL:** <https://discourse.nodered.org/t/ui-template-size-overlap/1033>\
**Category:** Dashboard\
**Created:** [24 June 2018 10:01 UTC](https://discourse.nodered.org/t/ui-template-size-overlap/1033 "2018-06-24T10:01:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![markost](https://avatars.discourse-cdn.com/v4/letter/m/3d9bf3/32.png) [@markost](https://discourse.nodered.org/u/markost)\
**Post date:** [24 June 2018 10:01 UTC](https://discourse.nodered.org/t/ui-template-size-overlap/1033/1 "2018-06-24T10:01:18Z")

</div>

Hi,

1st situation:

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

 ![all_6](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/438d7ae3d6bd4ae0105783b52cfc96c81f2f5b52.jpg)

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/2d6dd80b7f1387fdfa519d758eaa35c88b7a8eed.jpg)

Is this normal or a bug?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [24 June 2018 18:44 UTC](https://discourse.nodered.org/t/ui-template-size-overlap/1033/2 "2018-06-24T18:44:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![igrowing](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/igrowing/32/663_2.png) [@igrowing](https://discourse.nodered.org/u/igrowing)\
**Post date:** [25 June 2018 07:38 UTC](https://discourse.nodered.org/t/ui-template-size-overlap/1033/3 "2018-06-25T07:38:21Z")

</div>

> [@markost](#):
>
> Is this normal or a bug?

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...

---

<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:** [25 June 2018 07:52 UTC](https://discourse.nodered.org/t/ui-template-size-overlap/1033/4 "2018-06-25T07:52:25Z")

</div>

It’s a known bug - [https://github.com/node-red/node-red-dashboard/issues/249](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)

---

<div class="post-metadata">

**Author:** ![markost](https://avatars.discourse-cdn.com/v4/letter/m/3d9bf3/32.png) [@markost](https://discourse.nodered.org/u/markost)\
**Post date:** [29 June 2018 18:58 UTC](https://discourse.nodered.org/t/ui-template-size-overlap/1033/5 "2018-06-29T18:58:26Z")

</div>

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!

```auto
[
    {
        "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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/ba9f3e29f0fdc1d851f4acc0e6d09677bacdf587.PNG)

---

<div class="post-metadata">

**Author:** ![igrowing](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/igrowing/32/663_2.png) [@igrowing](https://discourse.nodered.org/u/igrowing)\
**Post date:** [1 July 2018 10:23 UTC](https://discourse.nodered.org/t/ui-template-size-overlap/1033/6 "2018-07-01T10:23:07Z")

</div>

> [@dceejay](#):
>
> It’s a known bug - [https://github.com/node-red/node-red-dashboard/issues/249](https://github.com/node-red/node-red-dashboard/issues/249)

Any expectation for fix?

---

<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:** [1 July 2018 11:32 UTC](https://discourse.nodered.org/t/ui-template-size-overlap/1033/7 "2018-07-01T11:32:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![igrowing](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/igrowing/32/663_2.png) [@igrowing](https://discourse.nodered.org/u/igrowing)\
**Post date:** [2 July 2018 06:26 UTC](https://discourse.nodered.org/t/ui-template-size-overlap/1033/8 "2018-07-02T06:26:37Z")

</div>

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](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?