Advanced dashboard layout

[rogeriolucas]

Hello everyone,

I'm new to node-red and I need help with layout settings that, as much as I have researched, I haven't figured out how to do it.

I would like to create a layout by placing a transparent space like this image where I put red arrows:

Help number two: I would also like to do something like a colspan (compared to a table). For example: row1 with two columns (groups) and a second row, below row 1, with only one column (group), but occupying the area of the two columns of the first row.

I thank in advance who can help me.

[Trying_to_learn]

Hi @rogeriolucas and welcome to the wonderful world of Node-Red.

Sorry, but I am not getting what you want to do from the picture.

Is it you want the small gaps as shown or you want to add bigger gaps where the smaller ones are?

Looking at the first column, I am guessing it has 3 parts. The second and third have only one and the last has two.

Is this correct?

You need to use the dashboard layout part to get things done. But I shall await your confirmation of what you want to do.

Oh, just for the sake of it maybe helping, can you include a picture of your edit page with the dashboard layout showing?

That's the button top right that looks like a bar graph then you want the layout tab showing.

[rogeriolucas]

Hi, thank you very much for responding and sorry for not being clear before. I used this image as an illustration, I found it on google. I put the red arrows to indicate the space I want to place between the nodes. That's what I also want to do on my dashboard, you know?

My dashboard is this:

I need a vertical space between groups or in the same group to create a space, but I don't know how to create groups like that.
I want a result like that, it can be with nodes separated by space and in the same group or in different groups. (like this illustrative image):

[Trying_to_learn]

I think - going on what you showed - you need to do is to make the parts on different tabs.

Though not the best, this is what I mean:

Sorry it isn't quite the same as you have, but I hope you get the idea.

You didn't show me the layout as I requested (as per the first picture I now showed) so show that and we may be able to get things going.

[rogeriolucas]

Hi, what I want to do is divide these columns into two lines. I tried to use the 'space' node but it doesn't have the same backgroud color as the background to create the illusion of separation, so in the vertical all the nodes are glued together.

I didn't understand your suggestion, be careful, I'm a little slow sometimes ...

[hotNipi]

Dashboard layout base values can be adjusted in Dashboard Site Tab

I thing you are looking for group vertical space ..

It may help if you read this topic where dashboard card layout system is explained in more detail

[rogeriolucas]

Hello, this is exactly what I want to do. Place one group below the other vertically, but I can only place one next to the other, horizontally.

For example, I wanted to put group1 and group 2 on the first line, and create group 3 and group 4 below them, but I don't see where I can do that. You see? Side by side I can do it horizontally, it's easy.

For example, four groups and each one with a gauge but is hard yet...

This is the setting for the following image:

[{"id":"601b5618.d1aa18","type":"tab","label":"Flow 8","disabled":false,"info":""},{"id":"b357e117.35c9d","type":"ui_gauge","z":"601b5618.d1aa18","name":"","group":"dca023f2.7b7fd","order":1,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":240,"y":180,"wires":[]},{"id":"9936343e.e63958","type":"ui_gauge","z":"601b5618.d1aa18","name":"","group":"6beaa2d5.a446cc","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":400,"y":180,"wires":[]},{"id":"391fee27.c33c42","type":"ui_gauge","z":"601b5618.d1aa18","name":"","group":"dca023f2.7b7fd","order":2,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":240,"y":260,"wires":[]},{"id":"eabcd471.0fbe58","type":"ui_gauge","z":"601b5618.d1aa18","name":"","group":"6beaa2d5.a446cc","order":1,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":400,"y":260,"wires":[]},{"id":"dca023f2.7b7fd","type":"ui_group","name":"Group 1","tab":"dc60ee36.6b7cc","order":1,"disp":true,"width":6},{"id":"6beaa2d5.a446cc","type":"ui_group","name":"Group 2","tab":"dc60ee36.6b7cc","order":2,"disp":true,"width":6},{"id":"dc60ee36.6b7cc","type":"ui_tab","name":"Tab 4","icon":"dashboard","order":4}]

Thank you in advance

[rogeriolucas]

Hi,

I made these adjustments, but I think I must be doing something wrong yet. I want nodes separated vertically by space in the same group or in different groups, but I didn't find a solution..

[Trying_to_learn]

Where you are still stuck is that you need to make another two "groups" - I think is the term.

Then you put a gauge in each of them.
Then you have 4 groups, 4 gauges and you are another step forward.

See how you have Group1 and Group2 at the top in blue?
Make another two of them and move the other two gauges into those groups. (3 & 4)

There is also something going on with group1 as you can see the gauge is lower than the other one.

Check in the edit screen what else is in that group.

[JGKK]

If you use the nodered theme only groups will be seperated by borders. Widgets within in one group will be shown within the same box. You have three options to get that separation between widgets:
1-Either as said above you put each widget into its own group.
2-you use the option angular theme everywhere as this includes separation between widgets.
3-you are comfortable with css. Than have a look at this:

Customize dashboard CSS

Couple of things first.. Many things can happen if you start to play with CSS. You may break whole thing, but you can make your page really good looking. But be aware that it can be addictive. The result of your adjustments is art. So if you are changing CSS for your dashboard, you are an artist. (and a little bit a programmer of course) I'm not an expert of art nor the CSS. The tools Browser developer tools. https://developers.google.com/web/tools/chrome-devtools/css The main too…

Those are your three best options as far as i know
best regards johannes