# Strange Row Height Fault in DB2

**URL:** <https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327>\
**Category:** General\
**Tags:** dashboard-2\
**Created:** [29 May 2025 18:42 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327 "2025-05-29T18:42:50Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [29 May 2025 18:42 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/1 "2025-05-29T18:42:50Z")

</div>

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

---

<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:** [30 May 2025 07:51 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/2 "2025-05-30T07:51:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [30 May 2025 23:52 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/3 "2025-05-30T23:52:15Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0b0f5be40935dd84a5b39fbe854c2c75e5d4aabc.png)  
The top chart is a bar chart, but I also have line charts on another page with the same issue.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20e600a19f5742e6bc42cae83dcd6744fac0ecfb.png)  
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

---

<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:** [31 May 2025 07:29 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/4 "2025-05-31T07:29:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [31 May 2025 13:58 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/5 "2025-05-31T13:58:43Z")

</div>

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

---

<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:** [31 May 2025 16:04 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/6 "2025-05-31T16:04:16Z")

</div>

I think this issue might explains the behaviour you are seeing

> <https://github.com/colinl/node-red-dashboard-2-ui-gauge-classic/issues/20>
>
> With Dashboard 2.0 v1.24.1, I am having issues properly sizing the widget. Befor…e this most recent update, I was easily able to fit the widget in a 3x2 space. Now the widget appears very small unless I change the size to 'auto'. However, that adds a bunch of blank space unnecessarily to the bottom of the widget. Any assistance would be appreciated.
> 
> Screenshots for context.
> 
> v1.24.1 with size manually set to 3x2:
> 
> !\[Image\](https://github.com/user-attachments/assets/2acf2e5a-c519-4082-a787-581d10fdb711)
> 
> v1.24.1 with size set to 'auto':
> 
> !\[Image\](https://github.com/user-attachments/assets/34d49cfc-ec52-4139-b30f-b6c5a47eba76)
> 
> Previous versions:
> 
> !\[Image\](https://github.com/user-attachments/assets/7adf809c-db33-419b-98cf-28998a6ebd24)

See also

> <https://github.com/FlowFuse/node-red-dashboard/issues/1721>
>
> \### Current Behavior
> 
> When a \[Gauge Classic\](https://flows.nodered.org/node/@col…inl/node-red-dashboard-2-ui-gauge-classic) widget size is explicitly defined it is displaying too small. For example, if it is defined to be 3x3 in a group of width 3 then it shows smaller than if it is defined as auto size.
> This is a regression in v1.24.1. Version 1.24.0 introduced a problem where a vertical scroll bar appeared, in 1.24.1 the scroll bar has disappeared but the gauge is shrunk.
> In fact I see that it has completely messed up the core gauge node when auto is specified and shrunk it when an explicit size is specified.
> 
> \### Expected Behavior
> 
> 3x3 and Auto should show the same size in a width 3 group
> 
> \### Steps To Reproduce
> 
> Install https://flows.nodered.org/node/@colinl/node-red-dashboard-2-ui-gauge-classic)
> Import the attached flow, which has a classic gauge size auto and 3x3 in a 3x3 group and the same for core gauge node. This is the result
> 
> !\[Image\](https://github.com/user-attachments/assets/c500865c-285e-4739-87a8-422015a567e4)
> \`\`\`
> \[{"id":"bcc7d97b16534d33","type":"group","z":"997da33a0beedade","name":"Gauge size test","style":{"label":true},"nodes":\["fd4aa5affad9af01","9ffe63aa1f8baa5f","bfde22ae22e6dcad","85193b75029c35b3"\],"x":354,"y":7299,"w":192,"h":222},{"id":"fd4aa5affad9af01","type":"ui-gauge","z":"997da33a0beedade","g":"bcc7d97b16534d33","name":"Core Auto","group":"f72b0485d15f8689","order":3,"width":"0","height":"0","gtype":"gauge-34","gstyle":"needle","title":"Auto","units":"units","icon":"","prefix":"","suffix":"","segments":\[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}\],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":440,"y":7440,"wires":\[\]},{"id":"9ffe63aa1f8baa5f","type":"ui-gauge-classic","z":"997da33a0beedade","g":"bcc7d97b16534d33","name":"Classic Auto","group":"f72b0485d15f8689","order":1,"width":0,"height":0,"min":0,"max":10,"sectors":\[\],"major\_division":1,"minor\_division":0.2,"value\_decimal\_places":1,"scale\_decimal\_places":0,"label":"Auto","measurement":"temperature","units":"°C","needles":\[{"topic":"","color":"black","lengthPercent":"100"}\],"sweep\_angle":250,"myclass":"","x":450,"y":7340,"wires":\[\]},{"id":"bfde22ae22e6dcad","type":"ui-gauge-classic","z":"997da33a0beedade","g":"bcc7d97b16534d33","name":"Classic 3x3","group":"f72b0485d15f8689","order":2,"width":"3","height":"3","min":0,"max":10,"sectors":\[\],"major\_division":1,"minor\_division":0.2,"value\_decimal\_places":1,"scale\_decimal\_places":0,"label":"3x3","measurement":"temperature","units":"°C","needles":\[{"topic":"","color":"black","lengthPercent":"100"}\],"sweep\_angle":250,"myclass":"","x":450,"y":7380,"wires":\[\]},{"id":"85193b75029c35b3","type":"ui-gauge","z":"997da33a0beedade","g":"bcc7d97b16534d33","name":"Core 3x3","group":"f72b0485d15f8689","order":4,"width":"3","height":"3","gtype":"gauge-34","gstyle":"needle","title":"3x3","units":"units","icon":"","prefix":"","suffix":"","segments":\[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}\],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":440,"y":7480,"wires":\[\]},{"id":"f72b0485d15f8689","type":"ui-group","name":"Gauge Size Test","page":"c6ff182a4185f2f2","width":"3","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"f9b6670b127dc219","breakpoints":\[{"name":"Default","px":0,"cols":3},{"name":"Tablet","px":576,"cols":6},{"name":"Small Desktop","px":768,"cols":9},{"name":"Desktop","px":1024,"cols":12}\],"order":6,"className":"","visible":true,"disabled":false},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":\["ui-control","ui-notification","ui-gauge-classic"\],"headerContent":"page","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}\]
> \`\`\`
> 
> \### Environment
> 
> \- Dashboard version: 1.24.1
> \- Node-RED version: 4.0.9
> \- Node.js version: 22.16.0
> \- npm version:
> \- Platform/OS: Uvbuntu
> \- Browser: Edge
> 
> 
> \### Have you provided an initial effort estimate for this issue?
> 
> I am not a FlowFuse team member

---

<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:** [31 May 2025 16:32 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/7 "2025-05-31T16:32:22Z")

</div>

> [@Buckskin](#):
>
> how do I control the height of a widget?

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

---

<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:** [31 May 2025 16:33 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/8 "2025-05-31T16:33:10Z")

</div>

> [@Buckskin](#):
>
> if I have a chart of 3 \* 4 a 1 row gap appears at the bottom of the widget space

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

---

<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:** [31 May 2025 19:54 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/9 "2025-05-31T19:54:26Z")

</div>

> [@Buckskin](#):
>
> If I have a chart of 3 \* 4 a 1 row gap appears at the bottom of the widget space

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.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [31 May 2025 21:17 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/10 "2025-05-31T21:17:14Z")

</div>

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.

---

<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:** [1 June 2025 10:34 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/11 "2025-06-01T10:34:08Z")

</div>

> [@Buckskin](#):
>
> this issue can be probably be classed as resolved

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.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [1 June 2025 13:35 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/12 "2025-06-01T13:35:58Z")

</div>

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.

---

<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:** [15 June 2025 13:36 UTC](https://discourse.nodered.org/t/strange-row-height-fault-in-db2/97327/13 "2025-06-15T13:36:25Z")

</div>

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