How do I trigger a function/run code when the Size of a Panel changes?

Question

I want my layout to change depending on the size of a Panel (changes depending of how much text is inside). How do I trigger a function if my Panel changes height?

Context: The text in the Panel changes in the onAfterRendering function depending on what the api gives me. however depending on the size, another element has to change. But because its async and the api has to be loaded in the onAfterRendering function, this needs to run after the panel has been changed. This might be possible with promises, however it would be better if this also runs when the window is resized (which also resizes the panel).

I am not sure if EventProvider might help here, but I don't know how to use it or what sEventId's are valid.

var panelX = this.getView().byId('panelId'); panelX.addEventListener('resize', this.setNHeight();

I would really appreciate any help!

Answer 1

I found a solution that works:

I first implemented a Promise, so that add the text to the promise, and then updated the other element once.

function titlePromise() {
return new Promise(function (resolve) {
setTimeout(function () {
    resolve(true);
}, 0);
}).then(that.setTitle(lunchView, mealTitle, mealSubtitle)); //my function that adds the text to the panel

}

titlePromise().then(function () {
    that.setNHeight(); //the function I wanted to call after that
});

Then I used jQuery to run the function again, every time the window resizes. attaching this to my panel didn't work, but as the panel is defined with vw this is fine.

$(window).on('resize', function () {
    lunchV.setNutritionHeight(lunchView);
});

Also a quick thing to note for anyone trying anything similair: i was only able to use classes, not ID's in my jQuery prompt.