Incorrect value from getDOMElement()

For these nodes:

In the Function node, i have:

const ele = Inputs.element.getDOMElement();
console.log(Inputs.height);
console.log(ele.style.height);

The output is:

undefined
100%

If i am not mistaken, both of them are incorrect, right?

Hi Shrey!
I have just looked into your problem by recreating your node tree and function, and I think I have the solution to what you’re looking to do. I’m just in the middle of something else right now, but I will post an answer before I clock out today :slight_smile:

Best regards, Victor from Noodl

Hi again!

This seems to be a timing issue. Basically, in the way you’ve set it up, you run the function as the group mounts, but the height and width data coming from the Component Inputs are (by a very small margin) not in place as this happens - We’re talking an extremely small time window, but still just out of time. Therefore, the function runs with incomplete data inputs, so to speak - e.g. 100% height, instead of 300px, fixed. There are two ways I tried that both look like they solve your issue.

1) Simply remove the Signal Connection from Did Mount to Run.
This will cause the function to run whenever its inputs are updated, which is sure to happen once the data from the Component Inputs node are in place. As seen in the screenshot, this will however mean that there is first a reading of the “old” values of undefined and 100%, and then a split-second after you get the right values.

2) Add a delay between Did Mount and Run.
This will make sure the function runs after everything is readily in place. The delay can be as small as 1ms, but just to be sure, I like to put it something like 10-25ms (perhaps even more, if I’m working on heavier projects). As you can see, you only get one set of readings here, and fortunately they are the right ones too, hehe :slight_smile:

Hope this helps - let me know if you still face issues with this :slight_smile:

Best regards, Victor from Noodl

Hi @Victor_Permild , thanks a lot for the detailed write-up.

Indeed, i like the ‘Delay’ approach better as well.

Also, in the case of the 2nd value (ele.style.height), i’m still getting 100% instead of 200px
image