# And another dashboard probelm with layout

**URL:** <https://discourse.nodered.org/t/and-another-dashboard-probelm-with-layout/7647>\
**Category:** Dashboard\
**Created:** [6 February 2019 09:32 UTC](https://discourse.nodered.org/t/and-another-dashboard-probelm-with-layout/7647 "2019-02-06T09:32:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [6 February 2019 09:32 UTC](https://discourse.nodered.org/t/and-another-dashboard-probelm-with-layout/7647/1 "2019-02-06T09:32:41Z")

</div>

(This also has a bit of code in it which is also not seeming to be working for reasons explained below)

I have got the `ui_LED` node working. Alas it isn't that easy. ☹  
Here is a layout (series of pictures) of the flow, dashboard screen and what I see.

There is also a problem with the flow which I shall mention shortly.

First off pictures of the layout problem.  
Oh, and yeah, I know the order is mixed up (see picture) but that is nothing compared to the layout.

I **have** tried moving the entries in the list and it only _makes it worse_ in that...  
(I'll continue after the pictures)

 ![Screenshot%20from%202019-02-06%2020-11-42](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/93e79d17a5f8decfd7edf536b7b5e9da4cafa605.png) ![Screenshot%20from%202019-02-06%2020-11-59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/ab55cfa0e652db087ec46656d100d4b695df202c.png)

Picture 1:  
So you see I have them laid out on the edit side of the browser as:  
Main  
PiNet  
MusicPi

They didn't show on the screen that way. (I forget the exact order) but I think it was (from the column on the right)  
Main  
MusicPi  
PiNet

So I reversed the two _offending_ nodes and tried again.  
Now look at the second picture.

Pic 2:  
That is how they are presenting on the dashboard/GUI side of things.

I give up.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 February 2019 10:19 UTC](https://discourse.nodered.org/t/and-another-dashboard-probelm-with-layout/7647/2 "2019-02-06T10:19:28Z")

</div>

Hi @Trying_to_learn

For each of the ui\_led nodes you have in the WAP group, can you

1. select the node
2. export it to your clipboard
3. share it here

To begin to explain the layout issues, we need to see how those nodes are configured - specifically some of their internal properties that you don't set yourself.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [6 February 2019 10:21 UTC](https://discourse.nodered.org/t/and-another-dashboard-probelm-with-layout/7647/3 "2019-02-06T10:21:52Z")

</div>

Main LED:

```auto
[{"id":"206a31b2.c9b2e6","type":"ui_led","z":"c636aa5a.cc34","group":"2461b077.b59bb8","order":1,"label":"Main","name":"Main","x":3190,"y":2120,"wires":[]},{"id":"2461b077.b59bb8","type":"ui_group","z":"","name":"WAP","tab":"1c792414.600e94","order":4,"disp":true,"width":"3","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"dashboard","order":2}]

```

PiNet LED

```auto
[{"id":"bcb3f9b9.c03f1","type":"ui_led","z":"c636aa5a.cc34","group":"2461b077.b59bb8","order":3,"label":"PiNet","name":"PiNet","x":3190,"y":2180,"wires":[]},{"id":"2461b077.b59bb8","type":"ui_group","z":"","name":"WAP","tab":"1c792414.600e94","order":4,"disp":true,"width":"3","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"dashboard","order":2}]

```

MusicPi:

```auto
[{"id":"21ceb162.34f746","type":"ui_led","z":"c636aa5a.cc34","group":"2461b077.b59bb8","order":2,"label":"MusicPi","name":"MusicPi","x":3200,"y":2240,"wires":[]},{"id":"2461b077.b59bb8","type":"ui_group","z":"","name":"WAP","tab":"1c792414.600e94","order":4,"disp":true,"width":"3","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"dashboard","order":2}]

```

The layout has changed again to the way I want.

But that is not reflected by the list order. But it is in the order they are in the edit part of the page where you see the nodes.  
(Do you want the screen shots?)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 February 2019 10:31 UTC](https://discourse.nodered.org/t/and-another-dashboard-probelm-with-layout/7647/4 "2019-02-06T10:31:59Z")

</div>

Thanks. I wanted to see the `order` property of each of those nodes.

There have previously been issues where those order properties don't get set properly and can cause a mismatch between what the dashboard sidebar shows and what ends up appearing in the actual dashboard.

In this instance, I see they all have an `order` property and their values match the order you have in the dashboard sidebar:

Main LED has order 1  
MusicPi has order 2  
PiNet has order 3

Unfortunately this doesn't explain why the order has switched in the dashboard itself, but it does rule out one possible explanation.

> [@Trying\_to\_learn](#):
>
> The layout has changed again to the way I want.
> 
> But that is not reflected by the list order. But it is in the order they are in the edit part of the page where you see the nodes.

I"m not clear what you mean by `the order they are in the edit part of the page`. There are three things to consider:

1. the workspace where you add nodes and wire them together
2. the dashboard sidebar with its tree-view of your tabs/groups/nodes
3. the dashboard webpage itself

Of these three, you only set the order of nodes in the dashboard sidebar by reordering the nodes in the list. The physical position of the nodes in the workspace has no bearing on their position in the dashboard.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [6 February 2019 10:43 UTC](https://discourse.nodered.org/t/and-another-dashboard-probelm-with-layout/7647/5 "2019-02-06T10:43:53Z")

</div>

I shall agree with you 100% there.

But to put all the cards on the table, I have _noticed_ things when building web pages.

Say I put a new `gui` thing in a group.  
It is not always the first, but if it part of a list of things I've seen this happen:  
Node #1 goes in.  
I copy/paste it and rename as needed.  
I paste again and rename as needed.  
(repeat until done)  
All the nodes are in a nice "line" on the right side of the browser in the column after the first one.

Other times when I do this and not copy/paste, but drag the new nodes from the left: they get put anywhere in the list after I set their location.

For clarity on my

> [@knolleary](#):
>
> `the order they are in the edit part of the page`

See the pictures. Not to be difficult, but to show you what I am seeing.

The GUI is how I want it.  
Which - as I only mentioned - is how the buttons are in the edit part of the page. Not the right side column.  
This is only to confirm what I am seeing and want, compared to what the program is showing me.  
I am saying this because I don't want this to be taken the wrong way.  
(Had a bad day interacting with _people_ and hope I am over it and not still argo about it and letting it affect what I am saying. (Got a few alarms saying it may be happening now.))

 ![Screenshot%20from%202019-02-06%2021-34-52](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e15ac308e39ec291cced0b59a0418e54731092ec.png) ![Screenshot%20from%202019-02-06%2021-34-58](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f81ce0d200dfec932d6cef2fc1afdeb5e0904ceb.png)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 February 2019 10:57 UTC](https://discourse.nodered.org/t/and-another-dashboard-probelm-with-layout/7647/6 "2019-02-06T10:57:32Z")

</div>

![And_another_dashboard_probelm_with_layout_-Dashboard-_Node-RED_Forum](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/41f563eacdd931f86464fb0651899c32a390c631.png)

Just to be clear. There is _absolutely no relationship_ between the vertical order of the nodes as they appear on the left and the order they appear in the list on the right.

Moving the nodes around on the left will not change anything about how they appear on the right.

When you copy and paste a node, its 'order' property will also get copied. This means you _could_ end up with two nodes with the same order value. That can lead to unexpected results when viewing the dashboard.

The _best way_ to try to resolve it is, after you copy and paste a node, drag it to a new position in the dashboard sidebar, and then drag it to the position you want it in. That will ensure the `order` property is properly set.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [6 February 2019 11:01 UTC](https://discourse.nodered.org/t/and-another-dashboard-probelm-with-layout/7647/7 "2019-02-06T11:01:26Z")

</div>

Yes, ok.

And again: I agree. I'm just mentioning things I have seen/noticed while building GUIs.

Anyway, as it is, the LEDs are in their right places.

I think I will let it alone and not provoke anything else to happen.

Getting the LEDs to work (or more correctly: finding out they have now decided to work) and are now in the right place. I think I'd better stop while I'm ahead.

Other than that other dashboad problem with the and node suddenly creating stuff/empty space on the GUI..... All is good.

Again: Thanks.