Open fullscreen modals using primeng dynamic dialog

Question

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.

Answer 1

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

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

Answer 2

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%;
}