On element width or height change

Help & Support
1

Are there events when either the width or height of an element changes?

When the window is made wider, I want the text to fill the content and reflow

I’ve published the basic idea. The scroll view content is anchored to middle of screen.

Text width on resize - PLAYCANVAS

image
image1373×517 63.6 KB

Is it possible to update the scroll view example to show how the scroll view content and text element width changes when the window width changes and how the text reflows to fill the width?

2

If you are changing the size of the scrollview, you could also change the width of the text element at the same time?

For example, add to the end of the example:

app.on('update', update);

const original = scrollview.element.width;
let step = 0;
function update(dt) {
    step += dt * 2;

    const delta = Math.cos(step) * 100;
    const newWidth = original + delta;

    content.element.width = newWidth;
    scrollview.element.width = newWidth;
    text.element.width = newWidth;
}

You can also listen on some element resize event:

entity.element.on('resize', (width, height) => {
    // do something with new width and height
})
3

I figured it out by adjusting the scroll view anchor to 50%
image

Then adding the following script to the text element to adjust the content width as the viewport stretches and the content height to the text height as it changes

var TextHeight = pc.createScript('textHeight');

// initialize code called once per entity
TextHeight.prototype.initialize = function () {
    const onResize = () => {
        // set text width to viewport width
        this.entity.element.width = this.entity.parent.element.width = this.entity.parent.parent.element.width

        // set content height to new text height
        this.entity.parent.element.height = this.entity.element.height

    }
    // monitor viewport size
    this.entity.parent.parent.element.on('resize', onResize)

    // adapt to initial size
    onResize()
};

I published an updated working example here