CODEWITHSUNDEEP
javascriptangulartypescriptprimeng
Happy Coder
Happy Coder

Reputation: 4692

Open fullscreen modals using primeng dynamic dialog

I am using the PrimeNg modal extension for displaying modal popups in one of the Angular webapp I am working on. I am passing a component to the modal service as shown in the following code:

const ref = this.dialogService.open(LogsComponent, {
            data: {
                releaseID:row.release_id
            },
            header:'Migration Logs',
            width:'100%', 
            height:'100%'
        });

I am getting the ID that I passed and is able to display a table in the modal. Now the problem is even if I give 100% width and height, the modal is not appearing as full screen. I would like to have the modal maximized as it is for the PrimeNg Dialog.

Upvotes: 3

Views: 10404

Answers (6)

Phong6698
Phong6698

Reputation: 499

With getInstance(ref) you can get the instance and call maximize() to maximize the dialog

const ref = this.dialogService.open(LogsComponent, {
  data: {
    releaseID:row.release_id
  }
  header:'Migration Logs',
  width:'100%', 
  height:'100%'
});

this.dialogService.getInstance(ref).maximize();

You can also add this in your LogsComponent

constructor() {
  const dynamicDialogRef = inject(DynamicDialogRef);
  const dialogService = inject(DialogService);
  dialogService.getInstance(dynamicDialogRef).maximize();
}

Upvotes: 0

Saint48198
Saint48198

Reputation: 175

For primeng ~13 using the p-dialog tag, you can do the following:

<p-dialog #dialog (onShow)="dialog.maximize()">dialog text</p-dialog>

Upvotes: 3

martcs
martcs

Reputation: 269

Let's assume you initialize your dialog dialog like this, using maximizable option provided:

 this.dialogRef = this._dialogService.open(ChildComponent, {
        data: {
            item: this.childData,
        },
        header: 'Dialog Header',
        width: '70%',
        contentStyle: { overflow: 'auto' },
        baseZIndex: 100,
        autoZIndex: true,
        maximizable: true
    });

Then what you could do after opening a dialog is to set maximized = true for your dialog instances within DialogService

        this._dialogService.dialogComponentRefMap.forEach( x => {
            x.instance.maximized = true;
        });
        this._cdr.detectChanges();

Upvotes: 0

Fabian ramirez
Fabian ramirez

Reputation: 11

this worked for me!

.HTML

(click)="openDialog(dialogCaidas)"

<p-dialog
  [(visible)]="displayCaidas" 
    #dialogCaidas
>

.TS

import { Dialog } from 'primeng/dialog';

  openDialog(dialog: Dialog) {
    this.displayCaidas = true;
    dialog.maximized = true;
  }

Upvotes: 1

Narjes Sharafi
Narjes Sharafi

Reputation: 11

you can use maximizable='true' for your dialog

Upvotes: 0

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

put these to styles.css. It accepts all dialogs if you want to only this one then give custom class and change ui-dialog with with custom class name

.ui-dialog {
    max-height: 100%;
}
.ui-dialog .ui-dialog-content {
    height: 100%;
}

with custom class

const ref = this.dialogService.open(LogsComponent, {
            data: {
                releaseID:row.release_id
            },
            header:'Migration Logs',
            width:'100%', 
            height:'100%',
            styleClass:"customModal"
        });

and in styles.css

.customModal {
    max-height: 100%;
}
.customModal .ui-dialog-content {
    height: 100%;
}

Upvotes: 2

Related Questions