Window resize only doesn't do the trick

[hotNipi]

Description

For window size if there is enough space the sidebar renders into the layout (not above), if to toggle the sidebar, the cards change their size accordingly. Any widget (like ui_gauge) using window resize event to update it's content are out of shape cos of course - the window size is not changed.

So it maybe needs to dispatch the resize forcibly window.dispatchEvent(new Event('resize')); when sidebar animation completes. Don't know if there is more such internal layout changes which then may need same sort of treatment.

Best, Endel

Epic/Story

No response

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

[joepavitt]

Thanks Endel, great spot. Will investigate

[hotNipi]

The workaround or why not the suggestion for creators would be to use ResizeObserver

 mounted(){  

        this.resizeObserver = new ResizeObserver((entries) => {
            this.onResize()
        });
        this.resizeObserver.observe(this.$refs['your-ref-name']);        
    },
 unmounted () {
        if(this.resizeObserver){
            this.resizeObserver.disconnect();
            this.resizeObserver = null;            
        }
    },

Can't say about the how it affects the overall performance ..

EDIT:

Tested with my custom gauges and works well.Updated code also in forum so can be used for testing. https://discourse.nodered.org/t/dashboard-2-0-is-now-generally-available/84913/84?u=hotnipi

[colinl]

Pointing out that this is still a live issue. See forum post https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239