# Advanced dashboard layout

**URL:** <https://discourse.nodered.org/t/advanced-dashboard-layout/23305>\
**Category:** Dashboard\
**Created:** [19 March 2020 03:04 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305 "2020-03-19T03:04:45Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rogeriolucas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogeriolucas/32/18538_2.png) [@rogeriolucas](https://discourse.nodered.org/u/rogeriolucas)\
**Post date:** [19 March 2020 03:04 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/1 "2020-03-19T03:04:45Z")

</div>

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:

 ![node-red-duvida-1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/9316d6dfe9111e0327c40f6b38b10249de43861b.jpeg)

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.

---

<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:** [19 March 2020 03:29 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/2 "2020-03-19T03:29:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rogeriolucas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogeriolucas/32/18538_2.png) [@rogeriolucas](https://discourse.nodered.org/u/rogeriolucas)\
**Post date:** [19 March 2020 04:09 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/3 "2020-03-19T04:09:41Z")

</div>

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:

 ![Screen Shot 2020-03-19 at 01.11.38](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad746979eef3d059ad15bb2e864ae96b7492cde1.png)

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):

 ![Screen Shot 2020-03-19 at 01.11.38](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a2eef0917241e2ad127b0c6d9f206b39dfbcc200.jpeg)

---

<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:** [19 March 2020 05:42 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/4 "2020-03-19T05:42:05Z")

</div>

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:

![Screenshot from 2020-03-19 16-37-21](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6f39c035e7550d4adc374bfd48d88317ba5180be.png)

![Screenshot from 2020-03-19 16-38-26](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd4d5899bfaf31706ca45d1c91ee279d0a7bc26c.png)

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.

---

<div class="post-metadata">

**Author:** ![rogeriolucas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogeriolucas/32/18538_2.png) [@rogeriolucas](https://discourse.nodered.org/u/rogeriolucas)\
**Post date:** [19 March 2020 18:55 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/5 "2020-03-19T18:55:46Z")

</div>

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 ...

---

<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:** [19 March 2020 19:00 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/6 "2020-03-19T19:00:56Z")

</div>

Dashboard layout base values can be adjusted in Dashboard Site Tab

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ec21be2f47fc0bd1533463bb6933d0feb35b96b2.png)

I thing you are looking for group vertical space ..

It may help if you read [this topic](https://discourse.nodered.org/t/dashboads-and-detecting-the-device-they-are-being-shown-on/23090/2) where dashboard card layout system is explained in more detail

---

<div class="post-metadata">

**Author:** ![rogeriolucas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogeriolucas/32/18538_2.png) [@rogeriolucas](https://discourse.nodered.org/u/rogeriolucas)\
**Post date:** [19 March 2020 22:49 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/7 "2020-03-19T22:49:24Z")

</div>

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:

```auto
[{"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}]

```

 ![Screen Shot 2020-03-19 at 19.44.33](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a1a54a42c112fc4bb0b5cc4ace2ed099c8461033.png)

Thank you in advance 🙂

---

<div class="post-metadata">

**Author:** ![rogeriolucas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogeriolucas/32/18538_2.png) [@rogeriolucas](https://discourse.nodered.org/u/rogeriolucas)\
**Post date:** [20 March 2020 01:08 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/8 "2020-03-20T01:08:44Z")

</div>

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..

---

<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:** [20 March 2020 02:14 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/9 "2020-03-20T02:14:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JGKK](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jgkk/32/18515_2.png) [@JGKK](https://discourse.nodered.org/u/JGKK)\
**Post date:** [20 March 2020 06:13 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/10 "2020-03-20T06:13:58Z")

</div>

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:

> [@paintbrush Customize dashboard CSS](https://discourse.nodered.org/t/customize-dashboard-css/23139):
>
> 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](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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [19 April 2020 06:14 UTC](https://discourse.nodered.org/t/advanced-dashboard-layout/23305/11 "2020-04-19T06:14:00Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.