Strange Row Height Fault in DB2

The row height in all my DB2 pages has suddenly reduced since updating to v1.24.1. This has happened in at least 3 different Node-RED instances and at least 2 different browsers.

The only way I have found to (temporarily) fix this is to amend the :root --widget-row-height. I am not actually convinced that this is the problem as the 48px value that I had to amend to 124px seems to be right. I can also (for graphs) amend the grid-row-end value from 1 to at least 2.

Has anyone any bright ideas as to the cause of this?

All instances NR v4.09, node v22 and DB2 v1.24.1

Are you seeing thia with any particular widgets? We introduced long overdue fix in 1.24.0 which mesnt that widgets abided by the height set on them. Up until now, elements were expanding the row height to be larger than that defined, causing inconsistency in Dashboard grid layouts

Appears to be various. ui-template nodes and ui-chart nodes. However I have a page with 4 charts and 2 are chopped off and 2 are fine.


The top chart is a bar chart, but I also have line charts on another page with the same issue.


I also have ui-template widgets that are ok, on the same page that I have chart nodes chopped off.

If I increase the grid-row-end to 2 that fixes the height of the button (Route 01) and the chart

Can you navigate to /dashboard/_debug for your Node-RED instance please. Then find the charts where you are seeing the inconsistent behaviour.

I can only think that for some reason, the height option isnt set correctly, maybe caused by an older version of the package, that we haven’t handled correctly

OK , I think I have discovered the problem. Previously all my charts were set at a row count of 1, with nrdb-ui-chart.height set to the height I wanted. This no longer works, I now have to set the row count to 5 to get more or less the same chart height, nrdb-ui-chart.height no longer works.

This also applies to the switch widgets.

I must have missed the documentation on this now being a requirement, sorry.

Checking the chart info in the browser developer data the chart canvas height seems to depend on the row count and changing it in the element.style just causes the chart display to distort so the question now is, how do I control the height of a widget?

This requirement has also upset several of my other dashboard pages as I now have an additional surplus row that has to be allowed for.

Sorry, finally (I hope) if I have a chart of 3 * 3 or 3 * 5 the chart fills the complete widget space, if I have a chart of 3 * 4 a 1 row gap appears at the bottom of the widget space

I think this issue might explains the behaviour you are seeing

See also

You set the number of rows as you are doing. That is the "height"

If you can open an issue for that, I'd really appreciate it. I wouldn't exprct that to happen.

I am not able to replicate that. Could you post a very simple flow exhibiting the problem? Just the chart and an Inject node should do it.

Apologies. When trying to set a simple flow for Colin this did not occur.

On further investigation a previous setting of nrdb-ui-chart.height, was affecting the height of the Group background, and as the widget height is restrained to the number of rows at a fixed height this left a gap between the bottom of the widget and the bottom of the Group. This gap varied according to the number of rows allocated to the chart. (I can no longer get a 3 * 3 chart to fill the space so I have no idea what was going on there)

This will probably not affect many people so this issue can be probably be classed as resolved. Please let me know if you are happy with that.

You can click the Solved checkbox at the bottom of your last post to mark that as the solution so that others will know it is solved.

Hi Colin, Thank you. I was checking with Joe that he was happy to mark this as resolved because there is still the issue of the Group height being able to be set where the widget height cannot. I will look at that as a separate issue.