# New 1.4.0 Release - Node-RED Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [13 March 2024 13:50 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402 "2024-03-13T13:50:12Z")\
**Posts on this page:** 14\
**Page:** 1

<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:** [13 March 2024 13:50 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/1 "2024-03-13T13:50:12Z")

</div>

Just a quick note to say that we've just published a new release for `@flowfuse/node-red-dashboard` (aka Dashboard 2.0).

You can see the full release notes here: [Release v1.4.0 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/releases/tag/v1.4.0)

### Stand Out Items:

- Documentation & code for future support (Node-RED 4.0+) of Dashboard nodes in subflows
- Now support import of all Dashboard 2.0 flows, without the needs to remove duplicate `ui-base` nodes
- Re-wrote the `ui-table` node to use `v-data-table`, so that you get sortable columns by default.
- Improved rendering of UI Gauges at smaller sizes

---

<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:** [13 March 2024 17:52 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/2 "2024-03-13T17:52:45Z")

</div>

> [@joepavitt](#):
>
> Improved rendering of UI Gauges at smaller sizes

They still don't render well when viewed on smaller devices, for example a phone.

**Laptop view of two 4x4 gauges**

 ![desktop](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/37e3fa4826265d448749fb31aba361a7d0e44936.jpeg)

**Phone view of the same page**

 ![phone](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/0390349223c0d348aa4b2e64f56592a8f647880a.png)

Notice how much space there is above and below the actual gauge.

---

<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:** [13 March 2024 18:05 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/3 "2024-03-13T18:05:09Z")

</div>

> **Phone view of the same page**

That's odd - I'd expect that to be taking up 4/6ths of the width of that, not 2/6ths?

Similarly, the gauge on the Laptop view is similar, that should be taking up more space, how big is the containing `ui-group` in both instances? Also, what resolution are you viewing for that mobile?

---

<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:** [13 March 2024 18:13 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/4 "2024-03-13T18:13:29Z")

</div>

![Screenshot 2024-03-13 at 18.13.03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e017059dd993fb173dc43a8f8b839d6d5f4860b0.png)

In my test environment, with a few `3x3` and `3x6` gauges, this is what I see.

What would you be expecting to be different here? I'm guessing you're expecting that the gauges are top-aligned instead? With their respective spaces, and then the white space lives below the widget? So, something like this:

 ![Screenshot 2024-03-13 at 18.16.03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/3/736f1f5d5c4c0a8d9d56f0f8b65ed5f543bd7873.png)

If you could send me an equivalent of this view, it'd be really helpful:

 ![Screenshot 2024-03-13 at 18.20.29](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/c/fc631bfebaedbf218373abdffd4deeee39573616.jpeg), right click any of the gauges \> Inspect Element. Then hover over the same element I'm hovering on here (`.nrdb-layout-group--grid`) and it will overlay the respective grid layout to assist with debugging.

---

<div class="post-metadata">

**Author:** ![Frida](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/frida/32/68250_2.png) [@Frida](https://discourse.nodered.org/u/Frida)\
**Post date:** [13 March 2024 18:49 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/5 "2024-03-13T18:49:15Z")

</div>

It's all shrunk with the new version!  
I can't find a setting that brings it back.

 ![pic01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/800aee4073189cfb8302c25e69aec4a01935377c.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:** [13 March 2024 18:59 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/6 "2024-03-13T18:59:02Z")

</div>

> [@joepavitt](#):
>
> how big is the containing `ui-group` in both instances?

It's the same instance viewed on a laptop & on a phone. The group size is 14 x 11.

> [@joepavitt](#):
>
> Also, what resolution are you viewing for that mobile?

It's a Pixel 6 phone which I believe is 1080 x 2400px

> [@joepavitt](#):
>
> I'm guessing you're expecting that the gauges are top-aligned instead?

Yes, but that isn't the whole issue. I would be happy if my gauges looked as good as yours!

> [@joepavitt](#):
>
> If you could send me an equivalent of this view, it'd be really helpful:

Here goes... it's in 2 screenshots due to size.

 ![ss1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/9/c9940f83e2bf7b9f85f9f6c1aca7403a3b7e5739.jpeg)

 ![ss2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/74013dfd515ce3d9372edd285be80d4112bdb72c.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:** [13 March 2024 18:59 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/7 "2024-03-13T18:59:10Z")

</div>

On the gauges, you need to define the size:

 ![Screenshot 2024-03-13 at 18.57.11](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/591b9a6caf14237b476eeefe509ccd7cc9ac6103.png)

I suspect you have `auto`, or a `6x1` gauge. The change we made (as was generally requested) was that we would stop trying to be smart about gauge sizing and just take whatever the user defines.

I do now realise though that I haven't considered `auto` as a size option (I've updated the default to be `3x3` iirc. I'll open an issue to make sure Gauges also support `auto`.

---

<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:** [13 March 2024 19:07 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/8 "2024-03-13T19:07:33Z")

</div>

> [@Paul-Reed](#):
>
> The group size is 14 x 11.

That's likely to be your issue. If you've got gauges of size 4, then on mobile they're going to be set as 4/14 of the width of the screen.

Whilst the full page auto scales down to 6/9/12 columns as per the [Grid Breakpoints](https://dashboard.flowfuse.com/layouts/types/grid.html#breakpoints) - if yo've got a group that's bigger than that, currently I consider the user's definition to be overruling mine, so the group itself will render within the page constraints, but still provide 14 columns for it's content.

In hindsight - this is probably something I should just override?

---

<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:** [13 March 2024 19:20 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/9 "2024-03-13T19:20:27Z")

</div>

> [@joepavitt](#):
>
> That's likely to be your issue

Yes, you are correct, setting it to 4 x 8 does display the gauges correctly on my phone.

> [@joepavitt](#):
>
> In hindsight - this is probably something I should just override?

I'll leave that to you to decide, I'm still wrestling with the whole layout thing so can't really comment 😄

---

<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:** [13 March 2024 19:25 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/10 "2024-03-13T19:25:15Z")

</div>

> [@Paul-Reed](#):
>
> I'm still wrestling with the whole layout thing so can't really comment

I did add a bunch of new docs with todays release for this:

- Layouts - [Layouts | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/layouts/)
- Grid Layouts - [Layout: Grid | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/layouts/types/grid.html)

Which I'm hoping help a little

---

<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:** [13 March 2024 19:26 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/11 "2024-03-13T19:26:41Z")

</div>

[1.4.1](https://github.com/FlowFuse/node-red-dashboard/releases/tag/v1.4.1) is going live imminently with a fix for this so that all existing `ui-gauge` widgets with `auto` sizing work again - rtaher than needing to manually set the sizes

**Update:** and it's live: [node-red-dashboard (node) - Node-RED](https://flows.nodered.org/node/@flowfuse/node-red-dashboard)

---

<div class="post-metadata">

**Author:** ![Frida](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/frida/32/68250_2.png) [@Frida](https://discourse.nodered.org/u/Frida)\
**Post date:** [13 March 2024 21:37 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/12 "2024-03-13T21:37:00Z")

</div>

It works again with version 1.4.1

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [13 March 2024 22:21 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/13 "2024-03-13T22:21:28Z")

</div>

Hi @joepavitt,  
I have removed my local dashboard fork (with a hardcoded path to load the third-party widgets from my httpAdminRoot subpath), and installed this version. And it now works fine in combination with my httpAdminRoot setting.

Thanks a lot for the quick fix! Faster than my shadow 😋

You and @Steve-Mcl and others in the team have made again a huge step forward with this new version. My congratulations!! Very exiting times for Node-RED geaks and freaks...

Bart

---

<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:** [12 April 2024 22:21 UTC](https://discourse.nodered.org/t/new-1-4-0-release-node-red-dashboard-2-0/86402/14 "2024-04-12T22:21:34Z")

</div>

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