layout-menu-static-inactive trigger resize?

[vrmerlin]

I have content in my layout-main-content div that requires some resizing if the parent content changes. I've got a call in my code that works fine if the browser window is resized. But, if the Ultima menu is collapsed (i.e. layout-menu-static-inactive is set to true), the resizing event doesn't occur.

I tried adding the code

Code: Select all

window.dispatchEvent(new Event('resize')

to the

Code: Select all

onMenuBottonClick(event)

function. I can see it properly triggers the resize, but it executes *before* the menu is actually collapsed and thus the resizing doesn't work. If I then go and execute the same line of code from the console, the layout then appears correct.

Is there any way I can dispatch the resize event on the window *after* the menu is completely hidden?

John

[DarthMaul]

Hi,

We will replicate the problem and get back to you what are we expecting to happen if it is work as you described?

[vrmerlin]

This isn't really a "problem", so much as a needed feature, or some guidance needed. In short, the layout of my main page is very complicated, using a panel docking engine called Phosphor.js. When that docking region is resized, a function needs to be executed in Phosphor.js that "fixes" the layout. The Ultima menu region on the left, when moved between "visible" and "hidden" causes the main content area to be resized. I need a way to execute the function that fixes the layout, and have it execute AFTER the hiding is complete. Make sense?

John

[DarthMaul]

We will discuss about this and inform you.

[vrmerlin]

I never got a reply back -- can someone help me? Basically, I think i need to be able to run JavaScript code during and/or after the menu animation, so my layout adjusts accordingly. We are really stuck here.

Thanks,
John

[DarthMaul]

Hi John,

We have a technique which we are using on some components maybe it can help you.

First you need to add this to constructor and import it from angular/core
constructor(public el: ElementRef) {}

Then you can reach that element like this.
this.el.nativeElement

And the technique that I mention is if
this.el.nativeElement.offsetParent is exist then that element is visible.

You can check it inside of ngAfterViewChecked
This is an example for gmap component of primeng

Code: Select all

ngAfterViewChecked() {
        if(!this.map && this.el.nativeElement.offsetParent) {
            this.initialize();
        }
    }

Best Regards,
Mertcan

[vrmerlin]

Ok, thanks for the suggestion. We'll play with it.