# Dashboard layout

**URL:** <https://discourse.nodered.org/t/dashboard-layout/65460>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, ui-widgets\
**Created:** [22 July 2022 05:39 UTC](https://discourse.nodered.org/t/dashboard-layout/65460 "2022-07-22T05:39:53Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![FatimaSeemab](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fatimaseemab/32/63515_2.png) [@FatimaSeemab](https://discourse.nodered.org/u/FatimaSeemab)\
**Post date:** [22 July 2022 05:39 UTC](https://discourse.nodered.org/t/dashboard-layout/65460/1 "2022-07-22T05:39:53Z")

</div>

Hi, i need help. I have the following layout and I want my elements to be arranged like this

 ![Screenshot 2022-07-22 at 10.36.36](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dcdcbb95616bda053666d01114b0e5664a3e1e90.png)  
but somehow it is giving me the following output could anyone help me.  
 ![Screenshot 2022-07-22 at 10.39.15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3bb2c9856d8fd3654fcecde0f32780ac542baa8b.png)  
I want the sidebar to the leftmost side and bar chart in the first row and all three panels in 2nd row

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [22 July 2022 06:08 UTC](https://discourse.nodered.org/t/dashboard-layout/65460/2 "2022-07-22T06:08:13Z")

</div>

If you select Dashboard list (on the top-right of your window)...  
 ![dashboard_list](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/e/7e32c03f03032edcb302cf376818df6ba9aaf003.png)

Then hover over the Dashboard you want to change and select Layout...  
 ![dashboard_layout](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/44a9b9f104abe3abdfafc64fa145dc47b1ade865.png)

You should be able to drag the various widgets around to form your required layout.

---

<div class="post-metadata">

**Author:** ![FatimaSeemab](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fatimaseemab/32/63515_2.png) [@FatimaSeemab](https://discourse.nodered.org/u/FatimaSeemab)\
**Post date:** [22 July 2022 08:28 UTC](https://discourse.nodered.org/t/dashboard-layout/65460/3 "2022-07-22T08:28:16Z")

</div>

I am building a dynamic dashboard. For instance, on the sidebar, if we select current, it will display a different group than if we choose the voltage. So I used the UI control to dynamically hide and show the groups. As far as layout is concerned this is the output of the layout.

 ![Screenshot 2022-07-22 at 13.26.31](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd76739e8bd474a9604c8e868a473deb6e7e2fba.png)  
According to my limited knowledge it is correct but can you guide me what is wrong in it

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [22 July 2022 09:12 UTC](https://discourse.nodered.org/t/dashboard-layout/65460/4 "2022-07-22T09:12:53Z")

</div>

I find using a single 'Group' and placing all the ui-items (widgets) inside it works best for me.  
Here's an example of my dashboard for viewing Wildfires around the world.

 ![wild_fires_C](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a185328fee92608765a9efe9a07d624c6a62fe7d.png)

![wild_fires_A](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/886d5741ac10bfc9825248c1bfce63997a389e27.png)

 ![wild_fires_ABPNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/86812421530b0793f5dc071c569d402669ccc2b5.png)

**EDIT:**  
Just re-read your post about the "dynamic" action.  
I've never tried to do that and don't know if NR is capable of doing that.  
I'm sure someone else will jump-in and help.

Just found this posting - looks like you could modify the code to do what you require.

> [@How to start a dashboard with some group hiden](https://discourse.nodered.org/t/how-to-start-a-dashboard-with-some-group-hiden/30570):
>
> Hello, I'm new in here and as used of the node-red, I've been facing a problem trying to hide so groups of my dashboard when I first start my dashboard... I would like to see if anyone could help me. I'm dashboard is hosted in IBM cloudant. I've created a simple dashboard with some gauges and a form node, each gauge and also the form is in a different group. I'm using the form node to make a login screen, receiving the username and password input from the user, then I use the fuction node to…

---

<div class="post-metadata">

**Author:** ![Mrb32](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Mrb32](https://discourse.nodered.org/u/Mrb32)\
**Post date:** [22 July 2022 12:01 UTC](https://discourse.nodered.org/t/dashboard-layout/65460/5 "2022-07-22T12:01:51Z")

</div>

I use the same functionality a lot... It can be a pain at times. The location of groups to display can be a bit unpredictable, NR will try and cram as much stuff as possible in as little space as possible, so things don't necessarily appear where you expect them, especially with a combination of differently sized groups.

I work around this feature by using some or all of the following:

- I try and keep dynamic dashboard groups (the ones controlled with Ui-control show/hide) in a uniform size, or at least keep alternatively displayed group the same size.

- I try to avoid using the "auto" size settings anywhere.

- Within the dashboard groups, I remove unused spacers that might have been automatically generated by the layout tool or left behind when shifting things around manually, and I check the ones I need are the right size.

- I split the dashboard in zones using groups containing a text node which is used as label for the area, the groups and node are manually set to the desired width, usually much wider than the dynamic groups that follow, this forces node-red to place them below.

- Finally, there is also the option to set the default page width of the dashboard tab (i can't remember where that is, I think you need to dive in a css file somewhere).

My 2 pennies...

PS edit: So, looking at your layout, I think it might be worth trying to make the sidebar group the same height or taller than the the other elements

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [23 July 2022 08:30 UTC](https://discourse.nodered.org/t/dashboard-layout/65460/6 "2022-07-23T08:30:32Z")

</div>

sometimes NR Dashboard is a pain to reach specific targets.  
I would suggest to write an application with `uibuilder` if you need more freedom on your GUI.

---

<div class="post-metadata">

**Author:** ![FatimaSeemab](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fatimaseemab/32/63515_2.png) [@FatimaSeemab](https://discourse.nodered.org/u/FatimaSeemab)\
**Post date:** [3 August 2022 08:35 UTC](https://discourse.nodered.org/t/dashboard-layout/65460/7 "2022-08-03T08:35:41Z")

</div>

Thank you everyone for the help in my case it was just rearranging the nodes in layout. I don't why it happens but If the nodes are placed in the correct order//layout even then first reorder them and then bring them to a required order.

---

<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:** [2 September 2022 08:36 UTC](https://discourse.nodered.org/t/dashboard-layout/65460/8 "2022-09-02T08:36:30Z")

</div>

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