How to lock the dashboards groups locations

Dashboard
1

Hello,

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 http://192.168.1.3:1880/ui/ 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.

2

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.

1 Like
3

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 }
1 Like
4

Hi,

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

5

Hello,

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

6

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
Yadid

7

Hi @Yadid,

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


<style>
     #Home_Default,
     #Home_Default_cards {
          position: fixed; 
          top: 10vh;
          left: 30vw;
}
</style>

Or what do you mean with specifize the solution

8

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
Yadid

9

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

10

Ty for the fast help.

Can you explain the following Parameters:
#Home_Default,
#Home_Default_cards

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
Yadid

11

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