How can I "freeze" and "scale" dashboard layout?

Dashboard
1

Hello,

I am using a dashboard that I specifically designed for a touchscreen width of 1920 resolution. I need to fully control exactly where every container box is. I now need to remotely log into the dashboard webpage but the screen on alternate devices can be varying sizes and wont always be 1920.

Angular / Bootstrap / CSS Flex causes the containers to move around and the layout becomes super messy. So I have fixed the width and heights in CSS to the original screen resolution which prevents Angular moving the containers. So problem of "freezing" the layout seems easy to resolve.

I now want to "scale" the webpage in a similar way that the webpage "zoom" function works. On the alternative remotely logged in device I can now manually zoom in or out to get the webpage width to expand to full width. But I would prefer the webpage somehow to detect the screen resolution automatically, divide by 1920 pixels then apply a zoom factor to get the width correct.

Any ideas on how I can do this in Node-Red? I understand the Zoom function in CSS should not be used so any other options?

Thanks

2 Likes
2

Apologies for derailing your thread, but can you give me an example of how you did this? I've been trying to find a way to keep things from moving around and the only way I've found is to put widgets in a group and fix the width.

I have no knowledge of CSS but I may be able to figure it out from an example. Thanks!

3

If you use developer tools through your web browser you can see the main container for the webpage is called body.nr-dashboard-theme. You can add a style override into the dashboard node(s) and can control and/or over ride things like background colors, widths, heights, over flows etc. Specifically for fixing the width you can do the following

body.nr-dashboard-theme {
   width: 1920px;
}
1 Like
4

Incase anyone else find this page in the future. The solution I came up with for resizing was in CSS to use the @media and transform function. I set the min and max width in 100px ranges and picked a transform that would scale the larger 1920x1080px screen to the smaller width. I had to add a few of these statements to cover the screen ranges. Seems to work ok.

@media screen and (min-width: XXXpx) and (max-width: XXXpx) {
  body.nr-dashboard-theme {
     width: 1920px;
     transform: scale(0.X);
     transform-origin: 0 0;
  }      
}
1 Like
5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.