# Dashboard template - dynamic sizing?

**URL:** https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704
**Category:** Dashboard
**Created:** [14 October 2019 17:48 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704 "2019-10-14T17:48:42Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [14 October 2019 17:48 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/1 "2019-10-14T17:48:42Z")

</div>

Is there any way, however fudgey, to resize a dashboard block dynamically to accommodate the contents of a template node?

For example, just the height would need changing.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [14 October 2019 17:57 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/2 "2019-10-14T17:57:43Z")

</div>

you could try sending a change tab command via ui\_control . Sending a blank "" should refresh the same tab and the resize logic may then work as the content is now there to be measured.... or may not.

---

<div class="post-metadata">

### Author: ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [16 October 2019 09:26 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/3 "2019-10-16T09:26:52Z")

</div>

**TL;DR** sending a `""` doesn't work. It does the same as refreshing the browser window, which also doesn't work. Any other ideas?

I've done some more testing. Note, Dashboard Template nodes are set to "auto" size.

- When I first deploy, with dashboard open in another browser windows, it doesn't size correctly:  

- When I refresh the browser window, no change

- When I browse to another Dashboard tab, then come back, it's fixed: 

- If I then refresh the browser window, it's broken again

- If I send a +1 then a -1 to a UI Control node, it's fixed (but this isn't practical)

- If I send a "" to UI Control node, it does the same as refreshing the browser window, i.e. it's borked... that would be practical but it doesn't work ☹

Any other clues?

---

<div class="post-metadata">

### Author: ![Paulf007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulf007/32/26758_2.png) [@Paulf007](https://discourse.nodered.org/u/Paulf007)
#### Post date: [16 September 2020 05:32 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/4 "2020-09-16T05:32:14Z")

</div>

> [@hazymat](#):
>
> a +1

I guess this is now old but I have the same issue with a table. If the table is loaded into the template node the only shows the first line after moving to another page and the back it resizes to the full length of the table.  
Any help 🙂?

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [16 September 2020 06:14 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/5 "2020-09-16T06:14:04Z")

</div>

The template only tries to size it self based on the content is has at time of rendering. It doesn't resize itself continuously. It is much better to manually fix the size and layout in advance to ensure a consistent appearance.

---

<div class="post-metadata">

### Author: ![Paulf007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulf007/32/26758_2.png) [@Paulf007](https://discourse.nodered.org/u/Paulf007)
#### Post date: [16 September 2020 08:23 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/6 "2020-09-16T08:23:01Z")

</div>

Ah this makes sense! Thank you - so a "cheat" workaround is to use the following

```auto
[{"id":"980fa4db.96de78","type":"ui_ui_control","z":"79ef69de.7df458","name":"","events":"all","x":1020,"y":1760,"wires":[[]]},{"id":"1525534d.e32efd","type":"delay","z":"79ef69de.7df458","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":630,"y":1780,"wires":[["6817f9f8.c58768"]]},{"id":"6817f9f8.c58768","type":"change","z":"79ef69de.7df458","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"-1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":820,"y":1780,"wires":[["980fa4db.96de78"]]},{"id":"f756bfdd.b28a6","type":"delay","z":"79ef69de.7df458","name":"","pauseType":"delay","timeout":"2","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":670,"y":1820,"wires":[["57824fc8.99693"]]},{"id":"57824fc8.99693","type":"change","z":"79ef69de.7df458","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"+1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":840,"y":1820,"wires":[["980fa4db.96de78"]]}]

```

This will switch tabs for 1ms so the page will blink on update. Not perfect but for my use it works fairly well.

---

<div class="post-metadata">

### Author: ![SynAckFin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synackfin/32/12468_2.png) [@SynAckFin](https://discourse.nodered.org/u/SynAckFin)
#### Post date: [8 December 2020 09:56 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/7 "2020-12-08T09:56:28Z")

</div>

Add this to your dashboard template:

```auto
<div ui-card-size="WxH">
   <!-- Your template here -->
</div>

```

Where W is the width and H is the height.  
If you want to use the default Group width then set W to 0 (zero).  
Here is an example with 4 different sizes for a template with a switch.

```auto
[{"id":"dec8dfb9.8b01d8","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"22490a56.915a46","type":"ui_template","z":"dec8dfb9.8b01d8","group":"5c06971a.d78e58","name":"Height One","order":0,"width":0,"height":0,"format":"<div ui-card-size=\"0x1\">\n <md-switch>Height 1</md-switch>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":190,"y":200,"wires":[[]]},{"id":"13c16dd4.b8f982","type":"ui_template","z":"dec8dfb9.8b01d8","group":"5c06971a.d78e58","name":"Height Two","order":0,"width":0,"height":0,"format":"<div ui-card-size=\"0x2\">\n <md-switch>Height 2</md-switch>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":190,"y":240,"wires":[[]]},{"id":"3603055a.0eacfa","type":"ui_template","z":"dec8dfb9.8b01d8","group":"5c06971a.d78e58","name":"Height Three","order":0,"width":0,"height":0,"format":"<div ui-card-size=\"0x3\">\n <md-switch>Height 3</md-switch>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":190,"y":280,"wires":[[]]},{"id":"c6e1fbf3.3efe5","type":"ui_template","z":"dec8dfb9.8b01d8","group":"5c06971a.d78e58","name":"Height Four","order":0,"width":0,"height":0,"format":"<div ui-card-size=\"0x4\">\n <md-switch>Height 4</md-switch>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":190,"y":320,"wires":[[]]},{"id":"5c06971a.d78e58","type":"ui_group","name":"DemoTab","tab":"77192d8a.e0785c","order":1,"disp":true,"width":"6","collapse":false},{"id":"77192d8a.e0785c","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [29 December 2021 01:44 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/8 "2021-12-29T01:44:59Z")

</div>

Just to revive an old thread, something I never resolved...

> [@Paulf007](#):
>
> Thank you - so a "cheat" workaround is to use the following

Sorry to be dim, but what are you feeding in to those 2x delay nodes? What actually triggers them? I tried adding a UI Control Node to trigger them as well, but it gets stuck in a loop that changes the tab continuously.

Thanks

---

<div class="post-metadata">

### Author: ![Paulf007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulf007/32/26758_2.png) [@Paulf007](https://discourse.nodered.org/u/Paulf007)
#### Post date: [29 December 2021 02:49 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/9 "2021-12-29T02:49:19Z")

</div>

You got me.  
I will need to go back and setup the dash ui again to check. I have since moved on to uiBuilder , so I currently don't even have the ui Installed.

---

<div class="post-metadata">

### Author: ![abesis](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@abesis](https://discourse.nodered.org/u/abesis)
#### Post date: [16 February 2022 12:31 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/10 "2022-02-16T12:31:19Z")

</div>

Hi,  
I've found a solution here  
[https://flows.nodered.org/flow/9ea2adb5cfc62abf5fc7d3dd021877d2](https://flows.nodered.org/flow/9ea2adb5cfc62abf5fc7d3dd021877d2)  
it works really nice.

---

<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: [2 March 2022 12:31 UTC](https://discourse.nodered.org/t/dashboard-template-dynamic-sizing/16704/11 "2022-03-02T12:31:35Z")

</div>

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