Element calculatedHeight - wrong calculation

Help & Support
1

Hi,

Currently I am trying to get the correct height of a text element to relatively size the parent entity. However I am running into some issues.

The calculatedHeight is actually shrinking every time I log it while the text entity receives the same text.

I made a small project to reproduce the issue;
https://playcanvas.com/editor/project/1403005

PopupScript.prototype.setPopup = function (id) {
    const data = PopupScript.popupData.find(entry => entry.id === id);
    if (!data) return console.warn('no popup data found for', id);
    if (data.activated) return;

    this.bg.element.anchor = new pc.Vec4(0, data.anchorY, 1, data.anchorY);
    this.entity.enabled = true;

    this.textEnt.element.text = data.text;
    setTimeout(() => {
        this.bg.element.height = this.textEnt.element.calculatedHeight + 0;
        console.log("height:",this.textEnt.element.height)
        console.log("calculatedHeight:",this.textEnt.element.calculatedHeight)
    }, 1000);


    // this.app.once('postrender', () => {
    //     this.bg.element.height = this.textEnt.element.calculatedHeight + 0;
    // });

    if (data.activated !== undefined) { // if it is defined it means it shows only once. If it is undefined it will show everytime
        PopupScript.popupData.find(entry => entry.id === id).activated = true;
    }

    this.currentid = id;

};

Any ideas, how to fix this?

2

Anybody?

3

Had a very quick look. I think the issue is the text entity is a child of the element that you are resizing so you are getting into some weird circular dependency of height calculation. Likely due to the child height being affected being set to stretch to the parents size.

Changing the text entity to be a preset of center anchor and pivot gets around that issue

https://playcanvas.com/editor/scene/2341472

1 Like
4

Thanks, that seems to work!