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
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.
Thanks, I figured out that using the same size of gauge put them under, I think it can be acceptable, thanks 
Deleted - this is poor advice!
1 Like
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!
See dceejay's solution below instead of this.
[
{
"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": "<style>\n#Demo_Demo_cards .nr-dashboard-slider p.label {\n width: 70%; \n max-width: 70%;\n min-width: 70%;\n overflow: hidden;\n}\n</style>",
"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.
1 Like
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
1 Like
I don't seem to have that! Layout, Site, Theme.
Ah found it! That's going to save a lot of time!
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
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
