# Proper way to update custom UI node height after changed

**URL:** https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175
**Category:** Dashboard
**Created:** [24 January 2022 21:05 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175 "2022-01-24T21:05:55Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![rons](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@rons](https://discourse.nodered.org/u/rons)
#### Post date: [24 January 2022 21:05 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175/1 "2022-01-24T21:05:55Z")

</div>

I have a custom UI node which implements external charting software.

Unfortunately, when height is set to auto (which is our preference), it initially renders with a small height until it receives data to plot. To make the full chart show, I inserted jQuery that fires after data is drawn, which resizes the parent card.

It seems that this workaround is incomplete, however, as any node in the group which is intended to follow the chart node renders _on top_ of the chart. It seems that NodeRED isn't aware of the new height.

Is there a way to update NodeRED to let it know the new height when it's set to auto? Alternatively, any suggestions at a different approach?

Thanks!

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [24 January 2022 21:33 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175/2 "2022-01-24T21:33:51Z")

</div>

Have you tried adding a `min-height` style element to it?

---

<div class="post-metadata">

### Author: ![rons](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@rons](https://discourse.nodered.org/u/rons)
#### Post date: [24 January 2022 21:39 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175/3 "2022-01-24T21:39:30Z")

</div>

I'm not sure that would help. Unless some kind of logic is being performed within NodeRED based on that property. The height is figured out by the charting library, so it would still end up being resized.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [24 January 2022 22:11 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175/4 "2022-01-24T22:11:57Z")

</div>

Without looking at not only the library but how it is used, I couldn't say. It may well be that the chart is contained within a div and that the div can be given a min-height. I usually have to spend time experimenting with these things to get the result I want.

---

<div class="post-metadata">

### Author: ![rons](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@rons](https://discourse.nodered.org/u/rons)
#### Post date: [24 January 2022 22:29 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175/5 "2022-01-24T22:29:46Z")

</div>

I appreciate the response!

I could assign a `min-height`. What I'm saying is I don't think that really addresses the underlying problem.

What happens is the div within the container programmatically gets assigned a new height.

The `md-card` that wraps it does not automatically resize along with it.

It is true that assigning `min-height` or an explicit `height` might make the dashboard container initialize with more space (to the tune of whatever `height` or `min-height` is assigned), but it still won't be accurate when it gets resized.

Put simply, when dynamic resize happens, NodeRED will still think the height is whatever it initialized to.

What I'm trying to do is programmatically notify Dashboard of the new height or force a refresh, so that all elements in the group get updated with the proper coordinates (as each has explicit x/y coords assigned in style by dashboard)

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [24 January 2022 22:54 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175/6 "2022-01-24T22:54:07Z")

</div>

Ah, OK. I'm afraid I don't like or use Angular so I'm probably not a lot of further help, sorry 😀

---

<div class="post-metadata">

### Author: ![rons](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@rons](https://discourse.nodered.org/u/rons)
#### Post date: [24 January 2022 23:09 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175/7 "2022-01-24T23:09:11Z")

</div>

@TotallyInformation I'm not an Angular user or fan either. I understand! Thanks for trying

* * *

It looks like the logic I need is in the controller for `ui-card-panel`.

> <https://github.com/node-red/node-red-dashboard/blob/3643ca196615ffee3673f14a2837cbe73c2ce335/src/components/ui-card-panel/ui-card-panel-ctrl.js#L29>

The issue is I don't know how to get to the controller. It was suggested I could do:

```auto
// #Home_Default is the id corresponding to the `ui-card-panel` element
angular
  .element(document.querySelector('#Home_Default')) 
  .controller()

```

However, this does not work. I just get the primary controller, no matter what I pass to angular.element()

If I could get to it, I believe I could directly fire the `refreshSizes` method

---

<div class="post-metadata">

### Author: ![rons](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@rons](https://discourse.nodered.org/u/rons)
#### Post date: [24 January 2022 23:16 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175/8 "2022-01-24T23:16:37Z")

</div>

Success!

```auto
angular.element('ui-card-panel').controller("uiCardPanel").refreshLayout()

```

That said, I'm getting at internals rather than using an official API, so if anyone knows if there is a more official way of doing this, please let me know.

Given what I've seen from searching the repo, this is my only option.

---

<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: [7 February 2022 23:17 UTC](https://discourse.nodered.org/t/proper-way-to-update-custom-ui-node-height-after-changed/57175/9 "2022-02-07T23:17:13Z")

</div>

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