# Node-red dashboard layout non-editable

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [12 March 2025 05:23 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937 "2025-03-12T05:23:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![shubhamnodered](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Post date:** [12 March 2025 05:23 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/1 "2025-03-12T05:23:18Z")

</div>

Hi Guys,

Using the **edit layout** feature of node-red dashboard 2.0, i'm trying to displace the visuals using drag and drop. but i can not. At a time, only thing i can able to do is to add 1x1 spacer from the dashboard 2.0 editable window but that too size can not be configured beyond 1x1.

Please refer into image. In the imgae i am trying to manulally edit the performance graph into Right hand side by drag and drop,And increase the size of OEE graph as well; but it does not allow me to.

Am i missing something?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/2/52ef6040cda3b14b9f2f743aaa2261ce2c380500.png)

Any suggestion would be greatly apprecited.

Regards,

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 March 2025 06:00 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/2 "2025-03-12T06:00:11Z")

</div>

@shubhamnodered ,  
When you open the developer tools of your browser, are there perhaps any errors in the console or network tabsheets? Or in your Node-RED server log?

I don't use this editor myself, so perhaps others might have better suggestions as mine...  
Bart

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [12 March 2025 06:41 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/3 "2025-03-12T06:41:44Z")

</div>

increase the height of OEE group, then performance should go to right..

---

<div class="post-metadata">

**Author:** ![shubhamnodered](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Post date:** [12 March 2025 07:02 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/4 "2025-03-12T07:02:35Z")

</div>

Though it does the job but i am talking about the adjusting widget dimension from the layout editor(increase or decrease) from the dashboard 2.0 layout editor. Similar to what we used in node-red dashboard 1.0 layout editor where we can use mouse cursor to increase/decrease the height of widget.

Here, i can only displace the widgets but not adjust there dimensions from the layout editor

---

<div class="post-metadata">

**Author:** ![shubhamnodered](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Post date:** [12 March 2025 07:04 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/5 "2025-03-12T07:04:54Z")

</div>

I looked into node-red server log, console, inspector and network inspect page as well, but there doesn't seem to have error of any kind. I do not have experience with "inspect", however if you want me to look into something more specific or sharing any image, i can do so

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [12 March 2025 07:20 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/6 "2025-03-12T07:20:52Z")

</div>

I never needed to play around the layout editor, I just always 'adjusted' my widget size to suit the default layout. so i may not be able to help you out here.  
Are you using GRID or FIXED layout ?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7acd756234fc370c77ece45d1e08ad980449d993.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [12 March 2025 07:22 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/7 "2025-03-12T07:22:27Z")

</div>

What browser is in use. I'v seen that there may be issues with firefox...

---

<div class="post-metadata">

**Author:** ![shubhamnodered](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Post date:** [12 March 2025 11:40 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/8 "2025-03-12T11:40:02Z")

</div>

firefox and chrome alike

---

<div class="post-metadata">

**Author:** ![shubhamnodered](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Post date:** [12 March 2025 12:18 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/9 "2025-03-12T12:18:37Z")

</div>

Grid based.

---

<div class="post-metadata">

**Author:** ![shubhamnodered](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Post date:** [12 March 2025 12:48 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/10 "2025-03-12T12:48:32Z")

</div>

Please refer to the demonstration.

Just confirm me something - If there is some kind of restriction to use mouse cursor to change the widget dimension in the layout editor?

Though @joepavitt clearly demonstrated that it is clearly possible [[Visual Layout Editor - Now Available in Dashboard • FlowFuse](https://flowfuse.com/blog/2024/11/dashboard-new-group-type-app-icon-and-charts/)]

In the demonstrative image, ithough i can able to displace the widgets, but cannot able to change dimension using cursor  
 ![Recording2025-03-12180235-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/987015749d082c186b4aaff8d5e3e9b75720f1da.gif)

---

<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:** [12 March 2025 13:30 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/11 "2025-03-12T13:30:27Z")

</div>

Are you using the latest version of the dashboard (1.22.1)?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [12 March 2025 14:44 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/12 "2025-03-12T14:44:15Z")

</div>

> [@shubhamnodered](#):
>
> but cannot able to change dimension using cursor

looks like you are not pulling longer enough...it changes in steps of column width defined in the layout grid.

_Your clips seems to show a 'bottom' holder, which i dont see in mine or in the demo .._

![layout_editor](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7c38119d94f287750f3734cc8cac5d957cd016de.gif)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [12 March 2025 14:47 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/13 "2025-03-12T14:47:26Z")

</div>

Things..  
The element cant go smaller that 1 unit.  
The underlying grid does not change on any move you make but only when necessary. That does not bring new possibilities in on fly.  
It does not always move on first try.  
Some moves do require free space to exist.  
If element growing requires other elements to change positions the new situation may restrict your intentional grow.  
It is not straightforward to understand what will be possible at any point of time when you try to change something.

There's no absolute freedom in this logic.

---

<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:** [12 March 2025 15:17 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/14 "2025-03-12T15:17:46Z")

</div>

> [@smanjunath211](#):
>
> Your clips seems to show a 'bottom' holder, which i dont see in mine or in the demo .

I do, and they work

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/4168dc9fd919f9bb973598764883d9ef119637df.png)

---

<div class="post-metadata">

**Author:** ![shubhamnodered](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Post date:** [12 March 2025 17:06 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/15 "2025-03-12T17:06:53Z")

</div>

This time pulling long enough seems to done the JOB. I don't know what happened earlier as you can clearly see in the visual image. But thanks anyway.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [12 March 2025 18:10 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/16 "2025-03-12T18:10:29Z")

</div>

> [@Colin](#):
>
> I do, and they work

How do I enable it? I can't vertically adjust the group.

---

<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:** [12 March 2025 19:00 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/17 "2025-03-12T19:00:53Z")

</div>

> [@smanjunath211](#):
>
> I can't vertically adjust the group

vertical sizing is only permitted on certain page types (where it make sense)

---

<div class="post-metadata">

**Author:** ![shubhamnodered](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Post date:** [12 March 2025 19:56 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/18 "2025-03-12T19:56:02Z")

</div>

I have somewhat different opinion.

Refering to my dashboard image:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/6/b63b54c448ff5e24ddad80720b5e9c2aa4ff5fcc.png)

For widgets(guage, button) defined inside a group =\> Both horizontal & vertical holder is provided. But for groups itself =\> only horizontal holder is possible. [might be programmed that way. Call to @joepavitt]

That's why with groups we can customize layout only horizontally but widget inside groups layout can be customized horizontally and vertically using drag holder

Referring to your( @smanjunath211 ) dashoard image:  
I don't know why i cannot see any drag holder on the widgets inside your dashboard groups but only visible to groups only. Try updating the node-red into latest version.

---

<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:** [12 March 2025 20:01 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/19 "2025-03-12T20:01:33Z")

</div>

You'd think i'd know considering I wrote the add spacer & widget sizing stuff 🙂

Memory aint what it was.

---

<div class="post-metadata">

**Author:** ![shubhamnodered](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@shubhamnodered](https://discourse.nodered.org/u/shubhamnodered)\
**Post date:** [16 March 2025 06:48 UTC](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937/20 "2025-03-16T06:48:59Z")

</div>

It seems browser is the issue.

Firefox = X  
Chromer = ✔

[Next page](https://discourse.nodered.org/t/node-red-dashboard-layout-non-editable/95937.md?page=2)