# Responsive Dashboard

**URL:** <https://discourse.nodered.org/t/responsive-dashboard/25638>\
**Category:** Dashboard\
**Created:** [27 April 2020 18:33 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638 "2020-04-27T18:33:44Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![eduardoluiztodero](https://avatars.discourse-cdn.com/v4/letter/e/dc4da7/32.png) [@eduardoluiztodero](https://discourse.nodered.org/u/eduardoluiztodero)\
**Post date:** [27 April 2020 18:33 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/1 "2020-04-27T18:33:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 April 2020 18:44 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/2 "2020-04-27T18:44:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![eduardoluiztodero](https://avatars.discourse-cdn.com/v4/letter/e/dc4da7/32.png) [@eduardoluiztodero](https://discourse.nodered.org/u/eduardoluiztodero)\
**Post date:** [27 April 2020 21:33 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/3 "2020-04-27T21:33:59Z")

</div>

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

 ![tela](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/127a5acc88ef9cdc1ed14b8dd4a375e671a23921.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 April 2020 21:40 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/4 "2020-04-27T21:40:18Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![eduardoluiztodero](https://avatars.discourse-cdn.com/v4/letter/e/dc4da7/32.png) [@eduardoluiztodero](https://discourse.nodered.org/u/eduardoluiztodero)\
**Post date:** [27 April 2020 21:42 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/5 "2020-04-27T21:42:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [27 April 2020 22:09 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/6 "2020-04-27T22:09:15Z")

</div>

> [@eduardoluiztodero](#):
>
> I'm sorry, I don't understand

Here is my weather dashboard;

 ![weather](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c57476191eafff60c85c8347e3b212036549698.jpeg)

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'.

![dash](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0faa27a66fd7b9dcb2af0d36b0874bc215c44d2e.jpeg)

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 ?

---

<div class="post-metadata">

**Author:** ![eduardoluiztodero](https://avatars.discourse-cdn.com/v4/letter/e/dc4da7/32.png) [@eduardoluiztodero](https://discourse.nodered.org/u/eduardoluiztodero)\
**Post date:** [27 April 2020 23:14 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/7 "2020-04-27T23:14:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [27 April 2020 23:17 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/8 "2020-04-27T23:17:30Z")

</div>

> [@eduardoluiztodero](#):
>
> Really cool, how did you manage to use these different elements?

I don't understand what you are asking??

---

<div class="post-metadata">

**Author:** ![eduardoluiztodero](https://avatars.discourse-cdn.com/v4/letter/e/dc4da7/32.png) [@eduardoluiztodero](https://discourse.nodered.org/u/eduardoluiztodero)\
**Post date:** [27 April 2020 23:22 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/9 "2020-04-27T23:22:30Z")

</div>

Which node package did you install to use this layout? [https://flows.nodered.org/node/node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard) This package does not have these graphics available

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [28 April 2020 02:24 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/10 "2020-04-28T02:24:43Z")

</div>

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](https://discourse.nodered.org/t/making-a-professional-dashboard/10536)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [28 April 2020 09:04 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/11 "2020-04-28T09:04:33Z")

</div>

> [@eduardoluiztodero](#):
>
> This package does not have these graphics available

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

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

```

---

<div class="post-metadata">

**Author:** ![calcioscacchi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/calcioscacchi/32/16898_2.png) [@calcioscacchi](https://discourse.nodered.org/u/calcioscacchi)\
**Post date:** [28 April 2020 09:53 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/12 "2020-04-28T09:53:14Z")

</div>

> [@Paul-Reed](#):
>
> The width of each individual group fits my phone's browser, and therefore are displayed one group

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.  
Suggestion?  
Thanks

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [28 April 2020 10:35 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/13 "2020-04-28T10:35:32Z")

</div>

> [@calcioscacchi](#):
>
> where i linked a Grafana dashboard.

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.

 ![graf](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f58df4dc97a0cacedaf270f3a495dce647089fad.png)

---

<div class="post-metadata">

**Author:** ![calcioscacchi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/calcioscacchi/32/16898_2.png) [@calcioscacchi](https://discourse.nodered.org/u/calcioscacchi)\
**Post date:** [28 April 2020 11:08 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/14 "2020-04-28T11:08:42Z")

</div>

> [@Paul-Reed](#):
>
> 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 gro

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/a/2a6f33fa9104fa832b9927d3b79269d981b9631a.png)

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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e6e1595b9315dbba04b9eb0ec5703cc6c6f73ac.png)

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/29aa61997ba0c86d2f6f4155850f48d31de40caa.png)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [28 April 2020 12:34 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/15 "2020-04-28T12:34:25Z")

</div>

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.

```auto
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;\" "+
"src=https://mydashboard.com:8444/d/zGx-37WRz/realtime-power?orgId=1"+
"&amp;refresh="+ msg.refresh +
"&amp;theme=dark"+
"&amp;from="+ msg.fromdate +
"&amp;to="+ msg.enddate +
"&amp;panelId="+panelid +
"&amp;fullscreen"+
"&amp;kiosk"+"> </iframe>";

return msg;

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 May 2020 12:34 UTC](https://discourse.nodered.org/t/responsive-dashboard/25638/16 "2020-05-28T12:34:27Z")

</div>

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