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.
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.
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?
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 
?
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.
1 Like
Ah this makes sense! Thank you - so a "cheat" workaround is to use the following
[{"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.
Add this to your dashboard template:
<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.
[{"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}]
1 Like
Just to revive an old thread, something I never resolved...
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
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.
Hi,
I've found a solution here
https://flows.nodered.org/flow/9ea2adb5cfc62abf5fc7d3dd021877d2
it works really nice.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
