# Move widgets under a group
**URL:** https://discourse.nodered.org/t/move-widgets-under-a-group/51259
**Category:** Dashboard
**Created:** [19 September 2021 21:15 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259 "2021-09-19T21:15:33Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [19 September 2021 21:15 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/1 "2021-09-19T21:15:33Z")
Hi, I've such situation:
a group with for sliders, I want to put down there some bttons with width 1, if I crate a new one it will put on the new colum on the right.
Can I put instead down, like the copy/past I realized?
Thanks for help
---
### Author:  [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [19 September 2021 21:29 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/2 "2021-09-19T21:29:19Z")
UI Groups automatically place themselves from left to right, wrapping around when reaching the limits of the scaled window.
No easy way to manually arrange them unless always keeping the exact same window/screen size and then using some creative juggling and group sizing.
> [@How can i make Tabs under each other than beside each other?](https://discourse.nodered.org/t/how-can-i-make-tabs-under-each-other-than-beside-each-other/47945/2):
>
> I am very new to Node-Red, so I could be wrong here innocent but based on what I have seen and read about, the default dashboard is limited in customizability in favor of relative ease of use. I have found the the relationship of the dashboard Groups (I think the Tabs are what is inside the Groups) is based dynamically on the window size... thus stacked vertically on mobile, and horizontally then vertically on larger screens. This can be demonstrated by switching between full screen and elon…
---
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [19 September 2021 21:38 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/3 "2021-09-19T21:38:11Z")
Thanks, I figured out that using the same size of gauge put them under, I think it can be acceptable, thanks 🙂
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [19 September 2021 21:42 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/4 "2021-09-19T21:42:16Z")
Deleted - this is poor advice!
---
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [19 September 2021 22:01 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/5 "2021-09-19T22:01:27Z")
this looks really a superb solution! But I can't figure out how to create a transparent template. Are you so kind to past a little flow as example? Thank you!
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [19 September 2021 22:31 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/6 "2021-09-19T22:31:45Z")
See dceejay's solution below instead of this.
```auto
[
{
"id": "f0646660824bf941",
"type": "tab",
"label": "Flow 3",
"disabled": false,
"info": ""
},
{
"id": "4f21997f2f494014",
"type": "ui_slider",
"z": "f0646660824bf941",
"name": "",
"label": "Cucina",
"tooltip": "",
"group": "3ce32370.c60f1c",
"order": 2,
"width": "5",
"height": "1",
"passthru": true,
"outs": "end",
"topic": "topic",
"topicType": "msg",
"min": 0,
"max": 10,
"step": 1,
"className": "",
"x": 480,
"y": 320,
"wires": [
[]
]
},
{
"id": "7a9e8627b7dc3a32",
"type": "ui_slider",
"z": "f0646660824bf941",
"name": "",
"label": "Lampadario",
"tooltip": "",
"group": "3ce32370.c60f1c",
"order": 3,
"width": "5",
"height": "1",
"passthru": true,
"outs": "end",
"topic": "topic",
"topicType": "msg",
"min": 0,
"max": 10,
"step": 1,
"className": "",
"x": 490,
"y": 280,
"wires": [
[]
]
},
{
"id": "1b1ba21441cd6891",
"type": "ui_template",
"z": "f0646660824bf941",
"group": "3ce32370.c60f1c",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"format": "",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 480,
"y": 240,
"wires": [
[]
]
},
{
"id": "b1a68bb3ec9df42d",
"type": "ui_slider",
"z": "f0646660824bf941",
"name": "",
"label": "Specchio da bagno illuminato",
"tooltip": "",
"group": "3ce32370.c60f1c",
"order": 4,
"width": "5",
"height": "1",
"passthru": true,
"outs": "end",
"topic": "topic",
"topicType": "msg",
"min": 0,
"max": 10,
"step": 1,
"className": "",
"x": 540,
"y": 360,
"wires": [
[]
]
},
{
"id": "5b56e03b5ae237b2",
"type": "ui_template",
"z": "f0646660824bf941",
"group": "3ce32370.c60f1c",
"name": "1 wide 2 tall",
"order": 6,
"width": "1",
"height": "2",
"format": "",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 910,
"y": 340,
"wires": [
[]
]
},
{
"id": "ec1ad71c1f1558de",
"type": "ui_button",
"z": "f0646660824bf941",
"name": "shower",
"group": "3ce32370.c60f1c",
"order": 10,
"width": "1",
"height": "1",
"passthru": false,
"label": "",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-shower",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 920,
"y": 400,
"wires": [
[]
]
},
{
"id": "c175409f0ef86230",
"type": "ui_button",
"z": "f0646660824bf941",
"name": "Bath",
"group": "3ce32370.c60f1c",
"order": 8,
"width": "1",
"height": "1",
"passthru": false,
"label": "",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-bath",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 630,
"y": 400,
"wires": [
[]
]
},
{
"id": "245a4e92213dd716",
"type": "ui_button",
"z": "f0646660824bf941",
"name": "Cold",
"group": "3ce32370.c60f1c",
"order": 5,
"width": "1",
"height": "1",
"passthru": false,
"label": "",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-snowflake-o",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 930,
"y": 280,
"wires": [
[]
]
},
{
"id": "a45d6979ea1f4f85",
"type": "ui_template",
"z": "f0646660824bf941",
"group": "3ce32370.c60f1c",
"name": "1 wide 1 tall",
"order": 7,
"width": "1",
"height": "1",
"format": "",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 490,
"y": 400,
"wires": [
[]
]
},
{
"id": "8f30c3dfc82d446d",
"type": "ui_template",
"z": "f0646660824bf941",
"group": "3ce32370.c60f1c",
"name": "2 wide 1 tall",
"order": 9,
"width": "2",
"height": "1",
"format": "",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 770,
"y": 400,
"wires": [
[]
]
},
{
"id": "3ce32370.c60f1c",
"type": "ui_group",
"name": "Demo",
"tab": "d74bbed4.c2cfb",
"order": 2,
"disp": false,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "d74bbed4.c2cfb",
"type": "ui_tab",
"name": "Demo",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
```
Note that I have arranged the widgets in the editor roughly in the order they appear on the dashboard, but it's the order they appear in the Dashboard Layout tab on the right that actually influences the layout.
It's not a very easily manageable technique!
Also note this example was exported from node-red fully updated, so it uses Dashboard v3. It should work fine on v2.30 too.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [19 September 2021 22:35 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/7 "2021-09-19T22:35:54Z")
Or click on the demo tab in the list on the right there and select the layout button to try the built-in layout tool
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [19 September 2021 22:40 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/8 "2021-09-19T22:40:50Z")
I don't seem to have that! Layout, Site, Theme.
Ah found it! That's going to save a lot of time!
---
### Author:  [@GiovanniG](https://discourse.nodered.org/u/GiovanniG)
#### Post date: [19 September 2021 23:00 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/9 "2021-09-19T23:00:01Z")
Thank you mates all! Wow, the best way is what dceejay suggested, I haven't found yet that layout function, it's really amazing!
Thank you a lot, brilliantly solved, without templates
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [3 October 2021 23:00 UTC](https://discourse.nodered.org/t/move-widgets-under-a-group/51259/10 "2021-10-03T23:00:06Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.