# UI-gauge layout for phone

**URL:** <https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, dashboard-2\
**Created:** [17 August 2024 10:59 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231 "2024-08-17T10:59:29Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2024 19:16 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/21 "2024-08-19T19:16:14Z")

</div>

> [@muggins](#):
>
> My samsung phone is 1080 pixels wide

That is the same as my One Plus Nord 2T, which is ok.

Have you got any CSS overrides in ui-template nodes?

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [19 August 2024 19:26 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/22 "2024-08-19T19:26:48Z")

</div>

I have a template with CSS for some buttons I use.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2024 19:30 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/23 "2024-08-19T19:30:36Z")

</div>

Temporarily disable the template node, just in case that is related.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [19 August 2024 19:35 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/24 "2024-08-19T19:35:40Z")

</div>

Made no difference

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2024 19:39 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/25 "2024-08-19T19:39:30Z")

</div>

What is the device pixel ratio of the phone? You can find out by browsing to [What’s My Device Pixel Ratio?](https://johankj.github.io/devicePixelRatio/)

Mine is 3 which means that the screen is 1080/3=390 px wide as far as the browser is concerned.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [19 August 2024 19:45 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/26 "2024-08-19T19:45:30Z")

</div>

I have a Motorola and a Samsung phone and both have ratio of 3. Both do the fold over thing

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2024 19:47 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/27 "2024-08-19T19:47:01Z")

</div>

So that does not explain it either then.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [19 August 2024 19:50 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/28 "2024-08-19T19:50:16Z")

</div>

So just to be sure... with group size 6x1 and widget size 2x1 you can see 3 gauges horizontally across the narrow/portrait screen.  
If so tomorrow I will do a complete new install of DB2 and just a bare page with 3 gauges.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2024 20:17 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/29 "2024-08-19T20:17:26Z")

</div>

Yes. 3 off 2x1 across the screen

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2024 20:35 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/30 "2024-08-19T20:35:25Z")

</div>

Oh, it is my system which is behaving differently, not yours. On a virgin system I see the same as you. I will work out what the difference between that and my normal system.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2024 20:57 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/31 "2024-08-19T20:57:19Z")

</div>

Aargh, I am stupid. I have a CSS override to stop the dashboard from limiting the number of columns to three on mobile, setting it to 6 instead. In my opinion the setting provided as standard is not ideal, for me at least.

Import this and try again.

```auto
[{"id":"edb7f91b04b8cc2a","type":"ui-template","z":"8df2df24f6899dee","group":"","page":"","ui":"ID-BASE-1","name":"Stop groups being clamped to three wide on mobile","order":0,"width":0,"height":0,"head":"","format":"/* Stop groups being clamped to three wide on mobile*/\n@media only screen and (max-width: 576px) { \n .nrdb-layout--flex { \n --layout-columns: 6 !important; \n } \n } ","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":390,"y":120,"wires":[[]]},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"]}]

```

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [19 August 2024 21:28 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/32 "2024-08-19T21:28:29Z")

</div>

OK that appears to be working now. Does this affect the behaviour of the native widgets as well, ie  
3 across the screen.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [20 August 2024 07:39 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/33 "2024-08-20T07:39:09Z")

</div>

> [@muggins](#):
>
> Does this affect the behaviour of the native widgets

Yes, it tells the dashboard to allow a total width of 6 across the screen.

@joepavitt I don't understand the logic in limiting the columns to 3 when the width is less than 576, which prevents layouts such as this, with three 2x1 widgets across a mobile screen with a width of 340.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [20 August 2024 07:55 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/34 "2024-08-20T07:55:22Z")

</div>

> [@Colin](#):
>
> I don't understand the logic in limiting the columns to 3 when the width is less than 576, which prevents layouts such as this, with three 2x1 widgets across a mobile screen with a width of 340.

Because that's how we handle responsiveness - it means that widgets across the board handle themselves far better on mobile. If we allow "6" width, then having 3 gauges side-by-side at that screen resolution would render them unreadable.

It is possible to override the number of columns with CSS, but I think it'll be a good move to also allow configuration of this column count as part of the theme too.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [20 August 2024 08:10 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/35 "2024-08-20T08:10:28Z")

</div>

I wasn't able to use 3 native gauges side by side at all. It seems that the font size does not scale.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [20 August 2024 08:21 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/36 "2024-08-20T08:21:31Z")

</div>

> [@joepavitt](#):
>
> If we allow "6" width, then having 3 gauges side-by-side at that screen resolution would render them unreadable.

This is a screenshot of 3 off size 2x1 gauges side by side on my phone, with the css override to set it to 6 columns. The text is small but it is still usable as the critical thing is the needle position.

 ![Screenshot_2024-08-20-09-15-18-98_40deb401b9ffe8e1df2f1cc5ba480b12](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/9/89f2e6c548abf1014372cfe645676fbb1a0269cd.jpeg)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [20 August 2024 08:31 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/37 "2024-08-20T08:31:47Z")

</div>

This is correct - we are short on the native gauge supporting the smaller render size currently - although not sure anyone has opened an issue about it yet - if you could do the honours, it would be appreciated: [Issues · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues)

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [20 August 2024 10:23 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/38 "2024-08-20T10:23:49Z")

</div>

![Screenshot_20240820_111710_Chrome](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/0213ca87c4ff5f5b95683fc717c35a0aa6908cc1.jpeg)  
This is one of my layouts in DB1 with 15 interactive swtches and 9 very easy to read gauges. I can't seem to achieve anything like that in DB2. When does db1 become deprecated and will it be a problem if i stick with it?  
Thanks

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [20 August 2024 14:44 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/39 "2024-08-20T14:44:03Z")

</div>

> [@joepavitt](#):
>
> I think it'll be a good move to also allow configuration of this column count as part of the theme too.

Yes, I think so.

@muggins if you change the CSS in the ui-template I posted to

```auto
/* Stop groups being clamped to three wide on mobile*/
@media only screen and (max-width: 576px) { 
    /* Fixed layout */
    .nrdb-layout--flex { 
         --layout-columns: 6 !important; 
     }
    /* Grid layout */
    .nrdb-layout--grid { 
         --layout-columns: 6 !important; 
     } 
 } 

```

Then it should also work for Grid layout, which may be better for you. Basically what it is saying is that if the screen width is small then set the number of columns to 6, so that with a group width of 6 then it fits the group to the screen whatever size it is.

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [20 August 2024 15:18 UTC](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231/40 "2024-08-20T15:18:37Z")

</div>

Thank you Colin. That behaves much better now. It would seem that I am one of the very few who view and use Dasboard on their phone. Much appreciate your help.  
John

[Previous page](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231.md?page=1)

[Next page](https://discourse.nodered.org/t/ui-gauge-layout-for-phone/90231.md?page=3)