[2/2 : Dynamic Styling] Dashboard + Grafana + Device Idiom

Dashboard
1

Hello,

i am new to Node Red and have some trouble to find a good solution.
I use the Node Red Dashboard an my Mac and also on my iPhone.
Especially the Grafana Dashboards I want to show in another width on both devices.
But this will not work with the help I find in the internet.
What I did...
Create a template with a new CSS Style:


<style>
     @media screen and (max-width: 600px) {
     /* Styling-Anpassungen für kleinere Bildschirme hier definieren */
 
     /* Beispiel: Ändere die Hintergrundfarbe für kleinere Bildschirme */
     body.nr-dashboard-theme {
         background-color: lightblue;
     }
     }
     
</style>

So I can change the background-color if the screen width is less then 600px. This work fine, so I now I am on the right place :slight_smile:
But than I did not find how to change btw. how to name the width of the dashboard-group where the template with the Grafana is located.
I only found the fixed value for the dashboard-group.

Please give me a hint :slight_smile:

Have a nice day
Martin

2

Again,
I have updated the title of this topic, as I was close to considering your 2 topics as duplicates.

Just to differentiate them

1 Like
3

It's not something that I think is easily done in Dashboard. You may want to take a look at

If you want to stick with Dashboard its probably easier to have two tabs setup to suit the screen sizes you want, and open the correct one on each device.

You could create some logic, to re-direct a client to the correct tab for its screen size, if needed.

1 Like
4

Hello,

Oh, that's terrible... :slight_smile:
Such a nice tool, an there is now easy way to setup for different screens.
What about if I turn the phone...

I am looking forward to find some solution without making two separate flows for each sreewn.
Have a nice day

Martin

5

The dashboard is intended to be a very easy way to get basic functionality. If you want a more flexible solution then you can use uibuilder. There is work ongoing to develop Dashboard 2.0 which will be more flexible but it is still at an early beta phase.

1 Like
6

I have seen this video: Link
It looks like the feature i am looking for... nice to know.

Is there a beta available?

Have a nice day

7

Yes there is, go to the Manage palette option and use @flowfuse/node-red-dashboard

8

Also search for forum for
dashboard 2.0
and you will find a number of ongoing threads on various subjects. Note though that it is still in an early phase of development and there is sill much to be implemented.

9

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