I have a large number of Dashboards running various things and finally decided to experiment with migrating to v2 and have run into some pretty basic issues right away. I started with a simple Subnet calculator I built as a teaching tool. I cannot attach the entire flow due to the character limit,…

[image] kocherjj: With {{payload}} in the 'Label' field, none of my Dash v2 buttons show msg.payload as the label, but instead show the literal string '{{payload}}' This is not possible yet - see related post made just recently: Specify key for ui-text - #2 by Steve-Mcl

[image] kocherjj: I am specifying item sizing but that is being ignored or at least modified. 1x1 gets stretched to roughly 3x1. This messes up the layout for everything rather badly. The default layout in Dashboard is called the "Grid" layout , which means that it will be 1 "column" wide, and…

I have been struggling with the sizing issue for a little while when trying to migrate to dashboard 2.0. Even when using fixed on the new dashboard, it seems that the row height is what is tripping me up. It has a value of minmax(45px, auto) which is allowing my content to make the row grow taller. …

Thanks for the feedback @kevinGodell - it's something we've gone back and forth on. Especially for ui-template and ui-markdown - I think we're steering towards the direction you're expecting, where we fix the height based on rows, overflow any content accordingly, but it does mean that it's not very…

Yes - that was the conclusion we came to with Dashboard 1 - If it auto resized it was too easy to make the whole layout move - and especially if you had highly dynamic data - then it could spend all day redrawing/resizing... and be totally unreadable.

the big difference here though is that with D1.0, widths were fixed size, and so consequently, so was the height. With D2.0, and Grid/Notebook layouts, the width of an element will vary, and so in turn, so will the height required by it's content.

[image] kevinGodell: minmax(45px, auto) Shouldn't that min value be in a responsive measure - e.g. EM or REM rather than PX? Also, not sure what browser versions you are targeting with D2? If allowing 2019+ or so, you could use a calculated max value - possibly based on the viewport height?

[image] TotallyInformation: If allowing 2019+ or so, you could use a calculated max value - possibly based on the viewport height? Naive to any content that is longer than the viewport though? [image] TotallyInformation: e.g. EM or REM rather than PX? This is just relative to font-siz…

[image] joepavitt: [image] TotallyInformation: If allowing 2019+ or so, you could use a calculated max value - possibly based on the viewport height? Naive to any content that is longer than the viewport though? Yes, vh is the viewport height so if the max is set to 100vh that is the f…

Just wanted to follow up that I was able to solve my issue with css in regards to replaced elements . Added an extra div as a container around the video element. Works as expected in all 3 of the dashboard 2.0 layout configurations. Thanks. The relevant css that helped me for the custom element: :h…

Node-RED

Node-RED Forum

Dashboard 2 not handling item sizing or custom labels as expected

Dashboard

Steve-Mcl 25 April 2024 21:15 2

This is not possible yet - see related post made just recently: Specify key for ui-text - #2 by Steve-Mcl

Topic		Replies	Views
The shape of a button Dashboard dashboard-2	39	703	15 October 2024
Latest Dashboard 2.0 Release - Tabs, Number Input & New Gauges Dashboard dashboard-2	31	853	5 October 2024
Dashboard 2 Labels Dashboard dashboard-2	10	246	2 December 2025
Dashboard 2.0: Layout : Fixed : Am I the only one who struggled with this? Dashboard	14	430	16 March 2026
Dashboard 2 Beta development Dashboard dashboard-2	174	3940	25 January 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Dashboard 2 not handling item sizing or custom labels as expected

Related topics