# Layout is broken when the layout editor is opened

**URL:** <https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [17 March 2022 04:06 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964 "2022-03-17T04:06:14Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [17 March 2022 04:06 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/1 "2022-03-17T04:06:14Z")

</div>

\*This text is translated by a translator.

See Steps

1. Use the Layout Editor to adjust the dashboard layout.

2.Deploy the system.

1. View the dashboard and confirm that it is in the same state as the layout set in step 1.

2. Open the Layout Editor again, and you will see that the layout in the Layout Editor is broken when you open it.

3. Deploy by pressing "Finish" in that state.

4. The dashboard shows the same collapsed layout as seen in step 4.

This procedure 1~6 is repeated all the way through.  
As a stopgap measure, it is fine to do steps 1~3 every time, but in practice, it is very tedious.

Please give me any solutions or wisdom regarding this problem of collapsing layouts every time I open the layout editor.  
Also, if you don't know of a solution but are experiencing similar problems, please let me know. I am trying to find out if this is only happening in my environment.

Node-RED version : v2.2.0  
Dashboard version : 3.1.5  
Device : Raspberry Pi 4B 4GB  
OS : Raspbian(bullseye)  
Browser : Microsoft Edge(I have a VNC connection from a Windows 10 PC.)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [17 March 2022 08:23 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/2 "2022-03-17T08:23:38Z")

</div>

Welcome to the forum @Yamada

Please tell us which versions of node red and node-red-dashboard you are using.  
Also what device and os you are running on, how you installed node red and which browser you are using.  
Please try to answer all the questions.

---

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [17 March 2022 23:44 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/3 "2022-03-17T23:44:30Z")

</div>

Thanks for the welcome Colin.

Node-RED version : v2.2.0  
Dashboard version : 3.1.5  
Device : Raspberry Pi 4B 4GB  
OS : Raspbian(bullseye)  
Browser : Microsoft Edge(I have a VNC connection from a Windows 10 PC.)  
How install : I don't remember. I think it was a very common Raspberry Pi installation method.

Sorry if I've misunderstood or missing information.  
These information will be added to the text later.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [18 March 2022 08:29 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/4 "2022-03-18T08:29:29Z")

</div>

Can you stop node red and start it again in a terminal and copy/paste the full startup log here please.

Do you see the same problem if you run the browser on the pi, or on another machine on the same network as the pi (so avoiding the VPN)?

---

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [21 March 2022 23:27 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/5 "2022-03-21T23:27:25Z")

</div>

pi@raspberrypi:~ $ node-red-start

Start Node-RED

Once Node-RED has started, point a browser at [http://192.168.1.44:1880](http://192.168.1.44:1880)  
On Pi Node-RED works better with the Firefox or Chrome browser

Use sudo systemctl enable nodered.service to autostart Node-RED at every boot  
Use sudo systemctl disable nodered.service to disable autostart on boot

To find more nodes and example flows - go to [http://flows.nodered.org](http://flows.nodered.org)

Starting as a normal user.  
22 Mar 08:19:24 - [info]

Welcome to Node-RED

22 Mar 08:19:24 - [info] Node-RED バージョン: v2.2.0  
22 Mar 08:19:24 - [info] Node.js バージョン: v14.19.0  
22 Mar 08:19:24 - [info] Linux 5.10.103-v7l+ arm LE  
22 Mar 08:19:25 - [info] パレットノードのロード  
22 Mar 08:19:26 - [info] Dashboard version 3.1.5 started at /ui  
22 Mar 08:19:27 - [info] 設定ファイル: /home/pi/.node-red/settings.js  
22 Mar 08:19:27 - [info] HTTP Static : /home/pi/node-red-static  
22 Mar 08:19:27 - [info] コンテキストストア : 'default' [module=memory]  
22 Mar 08:19:27 - [info] ユーザディレクトリ : /home/pi/.node-red  
22 Mar 08:19:27 - [warn] プロジェクトは無効化されています : editorTheme.projects.enabled=false  
22 Mar 08:19:27 - [info] フローファイル : /home/pi/.node-red/flows.json  
22 Mar 08:19:27 - [error] 未補足の例外:  
22 Mar 08:19:27 - [error] Error: listen EADDRINUSE: address already in use 0.0.0.0:1880  
at Server.setupListenHandle [as \_listen2] (net.js:1331:16)  
at listenInCluster (net.js:1379:12)  
at doListen (net.js:1516:7)  
at processTicksAndRejections (internal/process/task\_queues.js:83:21)

* * *

(It is a log of my language.)

Sorry for the late reply.  
This occurs even when the browser is run on a Pi.  
It also occurs when I run the browser on another different machine on the same network.

---

<div class="post-metadata">

**Author:** ![mickym2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mickym2/32/36128_2.png) [@mickym2](https://discourse.nodered.org/u/mickym2)\
**Post date:** [22 March 2022 02:47 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/6 "2022-03-22T02:47:00Z")

</div>

In general I agree with the thread creator - and I see no dependency with the NodeRed core system. If I open the layout editor it happens very often, that the layout is not completely destroyed, but I have to rearrange the groups either within the layout editor or rearrange spacers within the dashboard tab. This is happens since several versions and has not improved in the newest versions. (dashboard v 3.1.6 and Node-Red v 2.2.2)

However for me it has not the priority as you can manually fix it within the dashboard tab. I avoid to use the layout editor at all - as it does not work for me as well.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 March 2022 10:32 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/7 "2022-03-22T10:32:28Z")

</div>

> [@Yamada](#):
>
> 22 Mar 08:19:27 - [error] Error: listen EADDRINUSE: address already in use 0.0.0.0:1880

You did not stop node-red before starting it again.

---

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [23 March 2022 02:11 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/8 "2022-03-23T02:11:31Z")

</div>

pi@raspberrypi:~ $ node-red-stop  
Stop Node-RED

Use node-red-start to start Node-RED again

pi@raspberrypi:~ $ node-red-start

Start Node-RED

Once Node-RED has started, point a browser at [http://192.168.1.44:1880](http://192.168.1.44:1880)  
On Pi Node-RED works better with the Firefox or Chrome browser

Use sudo systemctl enable nodered.service to autostart Node-RED at every boot  
Use sudo systemctl disable nodered.service to disable autostart on boot

To find more nodes and example flows - go to [http://flows.nodered.org](http://flows.nodered.org)

Starting as a normal user.  
23 Mar 11:09:32 - [info]

Welcome to Node-RED

23 Mar 11:09:32 - [info] Node-RED バージョン: v2.2.0  
23 Mar 11:09:32 - [info] Node.js バージョン: v14.19.1  
23 Mar 11:09:32 - [info] Linux 5.10.103-v7l+ arm LE  
23 Mar 11:09:33 - [info] パレットノードのロード  
23 Mar 11:09:35 - [info] Dashboard version 3.1.5 started at /ui  
23 Mar 11:09:35 - [info] 設定ファイル: /home/pi/.node-red/settings.js  
23 Mar 11:09:35 - [info] HTTP Static : /home/pi/node-red-static  
23 Mar 11:09:35 - [info] コンテキストストア : 'default' [module=memory]  
23 Mar 11:09:35 - [info] ユーザディレクトリ : /home/pi/.node-red  
23 Mar 11:09:35 - [warn] プロジェクトは無効化されています : editorTheme.projects.enabled=false  
23 Mar 11:09:35 - [info] フローファイル : /home/pi/.node-red/flows.json  
23 Mar 11:09:36 - [error] 未補足の例外:  
23 Mar 11:09:36 - [error] Error: listen EADDRINUSE: address already in use 0.0.0.0:1880  
at Server.setupListenHandle [as \_listen2] (net.js:1331:16)  
at listenInCluster (net.js:1379:12)  
at doListen (net.js:1516:7)  
at processTicksAndRejections (internal/process/task\_queues.js:83:21)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [23 March 2022 08:59 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/9 "2022-03-23T08:59:44Z")

</div>

Either node-red was still running (even after the stop) or something else is using that port. Run `node-red-stop` again and then make sure that the web interface says not available. If the interface still works then I imagine you started node-red by a different method.

---

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [23 March 2022 23:20 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/10 "2022-03-23T23:20:21Z")

</div>

I confirmed that node-red does not stop even if I do `node-red-stop` many times.  
What should I do?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 March 2022 01:20 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/11 "2022-03-24T01:20:32Z")

</div>

What does **sudo ss -tulpn | grep 1880** output? It should show you the process which is using port 1880.

I do not know why **node-red-stop** is not working but you could try **sudo systemctl disable nodered** (Note "nodered" not "node-red")  
Followed by **sudo reboot**

---

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [24 March 2022 01:37 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/12 "2022-03-24T01:37:09Z")

</div>

pi@raspberrypi:~ $ sudo ss -tulpn | grep 1880  
tcp LISTEN 0 511 0.0.0.0:1880 0.0.0.0:\* users:(("node-red",pid=1426,fd=21))

* * *

I ran `sudo systemctl disable nodered` and node-red was still running...

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 March 2022 02:03 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/13 "2022-03-24T02:03:30Z")

</div>

Disable only prevents the service from being started automatically when the system is booted. It does not shut it down. That's why I said **sudo reboot**.

---

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [24 March 2022 02:09 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/14 "2022-03-24T02:09:43Z")

</div>

I have not configured node-red to start at system startup.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 March 2022 15:06 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/15 "2022-03-24T15:06:58Z")

</div>

Well it is somehow configured to run automatically, and not using the normal startup script. What have you done on the device that is node red related?

---

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [24 March 2022 23:13 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/16 "2022-03-24T23:13:37Z")

</div>

I have confirmed that node-red is not running automatically when the Raspberry Pi starts up.

I don't recall making any changes related to starting node-red.  
(or I forgot).

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 March 2022 14:12 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/17 "2022-03-25T14:12:53Z")

</div>

If you reboot and then try to open node red in the browser, do you see it? Refresh the page to make sure it is really there. If you do see it then obviously node-red is running. If you don't see it then what does the `ss` command show?  
`sudo ss -tulpn | grep 1880`

If you do see node-red in the browser then what does this show?  
`ps -aux | grep -i "node"`

Also, if you don't see it then try  
`node-red-start` again.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 March 2022 15:52 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/18 "2022-03-25T15:52:13Z")

</div>

We still have not seen the output of a clean startup of Node-red.

Something is odd about your installation since you say it doesn't automatically start at boot but when you try to start it, there is already a Node-red process using port 1880.

I don't disbelieve that you have confirmed it does not start automatically.  
But things that jump to mind as possible causes for this behaviour include:  
a) the systemd service (which is set up by the installation script) might be automatically restarting it.  
b) whatever mechanism node-red-stop uses might have insufficient privileges to kill the process.  
They both seem rather unlikely.

Getting back to the dashboard layout issue.

How wide are your dashboard groups? There are known problems with widths over about 30 units.

Please show us a screen capture of the layout editor when you have fixed the layout and another after you have deployed.

---

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [28 March 2022 23:30 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/19 "2022-03-28T23:30:36Z")

</div>

I cannot open node-red in my browser after rebooting.  
So I ran "sudo ss -tulpn | grep 1880".

pi@raspberrypi:~ $ sudo ss -tulpn | grep 1880  
pi@raspberrypi:~ $

I then ran "node-red-start" and then also "ps -aux | grep -i "node"".

pi@raspberrypi:~ $ ps -aux | grep -i "node"  
pi 1493 0.0 0.0 4328 3004 pts/1 Ss+ 08:26 0:00 /bin/bash /usr/bin/node-red-start  
pi 1506 18.2 2.2 201348 88796 pts/1 Sl+ 08:26 0:05 node-red  
pi 1554 0.0 0.0 4024 564 pts/0 S+ 08:27 0:00 grep --color=auto -i node

---

<div class="post-metadata">

**Author:** ![Yamada](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yamada](https://discourse.nodered.org/u/Yamada)\
**Post date:** [28 March 2022 23:59 UTC](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964/20 "2022-03-28T23:59:37Z")

</div>

The width of the dashboard group where the layout collapse is occurring is 6.  
However, the total width of groups belonging to the same tab exceeds 30.

①. Display on normal dashboard screen  
 ![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323630303237312f30396330313461322d393030622d383865302d393165662d3965613333303538316366382e706e67](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/848485ac4009242103ad705647eea26059303d14.png)

②. Go to the layout editor from the ① state.

![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/1/718156fc25202d6945181bb0dcb7f06d914bb3b0.png)

③. The layout settings are incorrect as follows  
 ![3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/abf653547f53074d64d4a35e2feb40ec7933a458.png)

④. Display on a trial deployed dashboard with the layout settings in ③.  
 ![4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b2a5df433e58f779234163430865651949fe93f1.png)

⑤. Make modifications on the layout editor and deploy.  
 ![5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/11aad3a2a613d0a05fc8c0ea5c156473017390b5.png)

![6](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/d/9d188fdb289c3c54e1c584f3cbd6432bad0aeee9.png)

⑥. When I go to the layout editor, the layout is broken again.  
 ![7](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/28a31eeab5609aa2273dd019aa534206ac25a339.png)

No matter how many times you repeat the process, it will be the same.

[Next page](https://discourse.nodered.org/t/layout-is-broken-when-the-layout-editor-is-opened/59964.md?page=2)