Proper way to update custom UI node height after changed

Dashboard
1

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!

2

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

3

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.

4

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.

5

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)

6

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

1 Like
7

@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.

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

// #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

8

Success!

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.

1 Like
9

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