Node-red dashboard layout non-editable

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?

Any suggestion would be greatly apprecited.

Regards,

@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

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

1 Like

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

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

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 ?

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

firefox and chrome alike

Grid based.

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]

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

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

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

1 Like

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.

I do, and they work

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.

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

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

1 Like

I have somewhat different opinion.

Refering to my dashboard image:

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.

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

Memory aint what it was.

1 Like