# Sizing of the UI Dashboard

**URL:** <https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978>\
**Category:** Dashboard\
**Created:** [9 May 2025 07:45 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978 "2025-05-09T07:45:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Naitsa](https://avatars.discourse-cdn.com/v4/letter/n/ecb155/32.png) [@Naitsa](https://discourse.nodered.org/u/Naitsa)\
**Post date:** [9 May 2025 07:45 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/1 "2025-05-09T07:45:35Z")

</div>

Hey there, i am quite new to NodeRed and have little to no experience.  
In my first project i want to give the UI-Group ("Home") 100% Width so it fills the screen, no matter the Width (and maybe height, too).  
The only thing where i can set the width was in properties, but there i can only type in hard numbers like 5 or 100. I now you can give the Group a specific CSS-Class, but where do i put the Code for it? I mean it is no specific node, is it? I only found it when i navigated threw the info tab -\> Global Config Nodes -\> ui\_group.

I hope you guys can help me!  
Thanks and have a great day:)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 May 2025 06:25 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/2 "2025-05-10T06:25:42Z")

</div>

Just for clarity, would you give the NR version, Dashboard Version ?

---

<div class="post-metadata">

**Author:** ![Naitsa](https://avatars.discourse-cdn.com/v4/letter/n/ecb155/32.png) [@Naitsa](https://discourse.nodered.org/u/Naitsa)\
**Post date:** [12 May 2025 05:25 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/3 "2025-05-12T05:25:14Z")

</div>

Sorry, but what do you mean exactly?

---

<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:** [12 May 2025 07:27 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/4 "2025-05-12T07:27:10Z")

</div>

Look at the bottom of the drop down menu in the node red flow editor and it will tell you the node red version. Then look in Manage Palette (in the dropdown menu) and it will show you the dashboard version number.

Also please select one of the dashboard widget nodes and Export it and paste it here. In order to make flow importable it is necessary to surround it with three backticks when you paste it (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![Naitsa](https://avatars.discourse-cdn.com/v4/letter/n/ecb155/32.png) [@Naitsa](https://discourse.nodered.org/u/Naitsa)\
**Post date:** [12 May 2025 07:34 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/5 "2025-05-12T07:34:36Z")

</div>

Ahh, thanks.  
node-red: 4.0.9  
node-red-dashboard: 3.6.5

---

<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:** [12 May 2025 08:03 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/6 "2025-05-12T08:03:48Z")

</div>

> [@Naitsa](#):
>
> node-red-dashboard: 3.6.5

I see you are using the old (now deprecated) dashboard. I suggest that you start again with newer (open source) [Flowfuse Dashboard](https://flowfuse.com/blog/2024/03/dashboard-getting-started) which is actively maintained and developed. The flowfuse dashboard is also known as Dashboard 2. Using that you can certainly achieve what you want.

---

<div class="post-metadata">

**Author:** ![Naitsa](https://avatars.discourse-cdn.com/v4/letter/n/ecb155/32.png) [@Naitsa](https://discourse.nodered.org/u/Naitsa)\
**Post date:** [12 May 2025 08:57 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/7 "2025-05-12T08:57:34Z")

</div>

Thank you very much, i will certainly try that!  
Have a great day! 😊

---

<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:** [12 May 2025 09:48 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/8 "2025-05-12T09:48:09Z")

</div>

This excellent video by the primary developer is worth watching:

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/902a08ff4f2fde55db8771a27ff4cf8aaa9fbf88.jpeg "Getting Started - Node-RED & FlowFuse Dashboard") ](https://www.youtube.com/watch?v=DFNv91TTt68)

@joepavitt I couldn't see the video linked from the [getting started guide](https://flowfuse.com/blog/2024/03/dashboard-getting-started/), unless I missed it.

---

<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:** [12 May 2025 11:11 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/9 "2025-05-12T11:11:43Z")

</div>

The video was produced after that article, we do link to the video on the Dashboard homepage here: [https://dashboard.flowfuse.com/](https://dashboard.flowfuse.com/)

---

<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:** [11 June 2025 11:11 UTC](https://discourse.nodered.org/t/sizing-of-the-ui-dashboard/96978/10 "2025-06-11T11:11:50Z")

</div>

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