Issue
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.
Solution
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%;
}
Answered By - mr. pc_coder
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.