How to lock the dashboards groups locations



I have created 3 groups in same tab like below.

  • 10x10 Group - in left [ map ]
  • 4*4 Group - in right top [ text ]
    44 Group - in right bottom [ gauge ]

I wanna fix their positions through out my project. At the begining they appears nicely. When I run the node also they are in the correct posions. But when I refresh the dashboard all positions change. Simply they are out of my control.

I want to fix their positions even if i reload the ui. Any option to do that ? Kindly help me..

Thank you.


The groups will try to arrange based on the width of the browser window, so on a narrow screen they will stack vertically, etc .

The only way to force them is instead to set one large group to be 14 x 10 then size the widgets as you have within that one group.


you also can fix the position of the groups.

#TabName_GroupName, #TabName_GroupName_cards { position: fixed; top: 10vh; // top in percent right: 30vw; // width in percent }



Thank you for the guidance. It works ! :smiley:



Thank you very much for the support. I will try this also.


Hallo Georg25,

can you specifize your Solution pls.

My Problem is, even with the Group Scaling Option, the Group don't have a fixed Position.
If i try to Start the Dashboard on a different Window, the Group Position isen't fixed.

best regards


Hi @Yadid,

an example to fix the position of group Default at tab Home is:

     #Home_Default_cards {
          position: fixed; 
          top: 10vh;
          left: 30vw;

Or what do you mean with specifize the solution


Hi Georg25,

ty for the fast answer.
Can you upload or Send me your Flows for the "tab Home" example.

That would help me to solve my Problem.

best regards


[{"id":"52462bd9.303fb4","type":"inject","z":"9f8aa1bf.915f6","name":"","topic":"","payload":"hallo","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":620,"wires":[["d2c645c6.bfc1d"]]},{"id":"d2c645c6.bfc1d","type":"ui_text","z":"9f8aa1bf.915f6","group":"9fb75e0f.0c6578","order":1,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":260,"y":620,"wires":[]},{"id":"47a26e4f.86ad88","type":"ui_template","z":"9f8aa1bf.915f6","group":"9fb75e0f.0c6578","name":"","order":1,"width":0,"height":0,"format":"<style>\n #Home_Default,\n #Home_Default_cards {\n position: fixed;\n top: 10vh;\n right: 10vw;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":460,"y":660,"wires":[[]]},{"id":"9fb75e0f.0c6578","type":"ui_group","z":"","name":"Default","tab":"1bf972e8.b02ec5","order":1,"disp":true,"width":"6","collapse":false},{"id":"1bf972e8.b02ec5","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false}]


Ty for the fast help.

Can you explain the following Parameters:

Are these the combination of the Dashboard Tab + Group names?
Because i did not found the #Home_Default_cards Group.

Do you solve the problem with more then 1 Element in a Group. Because if you have more then 1 Element the tamplate Node will not Fix all Elements. Do you have a solution?

best regards


Yes it is the combination of tab name and group name.
No I do not test it with more elements in the group, but you can add for each element a group and set the position to whereever you want