Dialog Component : maximize and restore not working properly with window resize

[Abdulali97]

I am using the PrimeNG Dialog component and I have got an issue when trying to automatically maximize and restore the dialog based on the window size. like I want the dialog to maximize when the window width is less than or equal to 660px and restore to its original size when it is greater than 660px.

The issue I'm facing is that the dialog does not maximize/restore automatically when resizing the browser window. It only changes the size after clicking inside the dialog, which is not the desired behavior.

Here's the code snippet I have tried:

 @ViewChild(Dialog) dialog!: Dialog;

  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    this.updateDialogSize();
  }

  ngOnInit() {}

  ngAfterViewInit() {
    this.updateDialogSize();
  }

  updateDialogSize() {
    if (window.innerWidth <= 660) {
      this.dialog.maximize();
    } else {
      this.dialog.maximize(); // This should restore the dialog, but it doesn't work as expected.
      this.changeDetectorRef.detectChanges();
    }
  }

I have tried several different approaches but none of them have resolved the issue.

Any assistance would be greatly appreciated. Thank you!

[kyjus25]

This works. Some kind of magic happens with initDrag to resize the window, even when draggable is false. Very strange.

https://stackblitz.com/edit/angular-rcca6c-ejnggy?file=src/app/demo/dialog-maximizable-demo.html

[Abdulali97]

@kyjus25 Hey there! I appreciate your suggestion, but when I resize the window using your code, the dialog starts moving with the mouse cursor

[kyjus25]

@Abdulali97 Ah dang it, I thought I'd fixed that. If you set [draggable] to false the issue should go away, but that may be a deal breaker depending on your use case. It is probably a change detection problem like your original code snippet, this was just the only way I could get it to trigger

[Abdulali97]

@kyjus25 Thank you, that solves it :) I think the auto-maximize feat in the dialog will be a great option It would enhance the user experience on smaller screens and make it easier for developers to create responsive applications for various devices.