Dashboard resolution layout

#1

Hello,
I have a question regarding the dashboard.
My situation can be found below, in the two images. I would like a certain panel (group) to be "forced" to be in a certain position, even if the screen resolution changes. This would avoid the "hole" you see in the second image.
Do you have any suggestions?
Thank you

#2

I think you should define width explicitly to keep layout unchanged. You can use a template node to set the width of the whole dashboard.
Set template type to 'added to site section'. Example:

body { width:800px; }

In some cases empty templates with suitable size are also useful as spacers to create the right arrangment of widgets.

1 Like
#3

I tried your suggestion, but the result is what you see in the image:

Create this css rule in template, it appears a, very bad, blank column on the right side of the screen.
I tried either body and md-content tag...

#4

see here - How to fix maximum screen size for a Node-RED Dashboard?

2 Likes
#5

Dashboard widget sizes and spaces are defined in pixels. So if resolution or window size is changed widget arrangement would change certainly. Only way to influence this behaviour is to override it with some global css.
What I recommended is a basic solution. I found better to have the blank area on the side than having a layout changing in a hectic way. You can step further and experiment with other css tricks...please let me know about the result because I am facing the same problem. What looks good on rpi touchscreen, cannot be used on mobile screen and too small on PC monitor etc.

#6

It's the same solution of @Mvogel

#7

I understand. It's a good suggestion, but esthetically is not acceptable.
Thanks