Window resize only doesn't do the trick

hotNipi commented 9 months ago

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 commented 9 months ago

Thanks Endel, great spot. Will investigate

hotNipi commented 9 months ago

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 commented 2 months ago

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

FlowFuse / node-red-dashboard