Responsive Dashboard

Hello guys, I'm making a panel to show my data .. how can this be responsive on the phone or tablet?

What have you tried?

Is it not already responsive?

Show us you screen shots and flow and I'm certain someone will be able to help.

When I open it on my phone, it is not responsive ):

Ah ok. So you have put everything in one group.

Try adding groups and putting your items / gauges etc into groups.

I'm sorry, I don't understand ... Do I have to organize the elements' arrangement differently?

Here is my weather dashboard;

The layout is a 'weather' tab with 2 groups, displayed side by side on a laptop screen. Group 1 is 'Current Conditions' & Group 2 is 'Forecast'.


The width of each individual group fits my phone's browser, and therefore are displayed one group below the other when viewed on my phone.

Is that helpful @eduardoluiztodero ?


Really cool, how did you manage to use these different elements?

I don't understand what you are asking??

Which node package did you install to use this layout? This package does not have these graphics available

There are some unique Dashboard nodes out there, just search for "ui" to find them. However you will probably find what you are really asking about is custom CSS. Check out this thread for example ... Making a professional dashboard

Yes it does, you just need learn how to format the dashboard nodes. For example, see this quick flow;

[{"id":"c4c35632.87bd58","type":"ui_template","z":"a444a9ff.e7a408","group":"61d2dced.3db8f4","name":"icon image","order":1,"width":2,"height":2,"format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi wi-darksky-cloudy fa-4x\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":650,"y":1950,"wires":[[]]},{"id":"8382565b.4fa298","type":"ui_template","z":"a444a9ff.e7a408","group":"61d2dced.3db8f4","name":"icon image","order":1,"width":2,"height":2,"format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi wi-darksky-rain fa-4x\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":650,"y":1990,"wires":[[]]},{"id":"61d2dced.3db8f4","type":"ui_group","z":0,"name":"flowtest","tab":"3c94630c.13381c","order":1,"disp":true,"width":22,"collapse":false},{"id":"3c94630c.13381c","type":"ui_tab","z":0,"name":"Test","icon":"dashboard","order":9}]

Hi! I'm in a similar situation, but I have just one tab and 1 group, where i linked a Grafana dashboard.
Unfortunately, it doesn't resize when i load it in my spartphone.

Instead of linking an entire Grafana Dashboard, why not create more NR groups, and link to different components from within the Grafana dashboard to each of the groups.
Then you can piece the groups together to construct your node-RED dashboard, which will then resize on different screens (as they will move around).
For example, add a grafana chart to group #1, add a grafana gauge to group #2, etc.

Here is a mobile screenshot from my phone of a grafana chart embedded in a node-RED group. Above and below it are other groups which contain other grafana components, as well as node-RED dashboard nodes.

1 Like

I'm trying to play with height and width in html code of every template. Anyway, when I try to see it on mobile screen, this is the results

Another weird thing is the follow:
In grafaan, i set my graphs with a particular time scale (last 30days for PM10 and 2.5 day average, and last 2 days for the graph with all the lectures. This is the result on grafana dashboard:

If i embeded the panels in NR, those setup are lost:

This is what I'm injecting into a ui_template node. You should be able to work out from my example, the iframe styling needed to display a chart like my screenshot above.
Note that I'm using buttons in the node-RED dashboard to select the time period for the chart.

var time = msg.payload.time;
var d = new Date();
var current = d.getTime();
var panelid=2;

msg.fromdate = "now-" + time;
msg.enddate = "now";
msg.refresh = msg.payload.refresh;

msg.template= "<iframe "+
"id=\"powerchart\" "+
"style=\"width:100%; height:100%; overflow:hidden;  margin:auto; border:none;\" "+
"&amp;refresh="+ msg.refresh +
"&amp;from="+ msg.fromdate +
"&amp;to="+ msg.enddate +
"&amp;panelId="+panelid +
"&amp;kiosk"+"> </iframe>";

return msg;
1 Like

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