0

I am using a dynamic MatDialog for confirmations and it opens displaying the message properly when the button clicked, except for the fact that every time any of the buttons that trigger the dialog is clicked, the cdk-overly-container appears in the index, below app-root and shifts app-root upwards permantly - even after the dialog was closed.

service class:

@Injectable({
  providedIn: 'root'
})
export class DialogService {

  constructor(private dialog: MatDialog) { }

  confirmDialog(data: ConfirmDialogData): Observable<boolean> {
    return this.dialog
    .open(ConfirmationDialogComponent, {
      data,
      width: '400px'
    })
    .afterClosed()
  }
}

component:

@Component({
  selector: 'app-confirmation-dialog',
  templateUrl: './confirmation-dialog.component.html',
  styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {
  constructor(private dialogService: DialogService, 
    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData) { }
}

styles.css

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

body {font-family: 'Poppins', sans-serif;}

a,
a:visited,
a:hover {
    text-decoration: none;
    color: inherit;
}

.cdk-overlay-container { position: fixed; }

enter image description here

enter image description here

I have read a lot discussions on this issue, regarding z-index and so on, aber could not fix the problem. I am using Angular 13 and mostly Google Chrome. Can anyone relate to this or kindly help to fix this?

Murilo de Melo Reis
  • 150
  • 1
  • 12
  • Once the `cdk-overlay-container` is appended to body (which is the correct behaviour) it remains in the DOM, even after the dialog is closed. I could not understand the problem that you describe? What is the space between index and the app-root? – andreivictor May 20 '22 at 10:38
  • When I click the btn to open the dialog, it shifts the content of the up, reducing its height by creating a white space below the , where it seems the cdk-overlay-container was automatically inserted in the DOM when the btn was clicked. So, between the bottom of the html file (index) and the bottom of the there is a white space when the dialog is opened that does not go away even after I closed the dialog: the height of got reduced and remained. Got it? – Murilo de Melo Reis May 20 '22 at 12:15
  • 1
    got it, most probably there's an issue with your css. Paste the css rules that you have for `html` and `body` elements. Also, check if the `cdk-overlay-container` has `position: fixed`. – andreivictor May 20 '22 at 12:52
  • I edited the post with the style.css. Pretty basic, cause the template of the AppComponent contains only The dialog is called from a child module, but the dialog component is in the AppModule where it is exported in the NgModule decorator to the child module. – Murilo de Melo Reis May 20 '22 at 13:11
  • I don't see an issue with the css. It's weird that the white space remains on screen even after the dialog is closed. At first glance, I thought it is somehow related to https://stackoverflow.com/questions/47782890/angular-material-dialog-component-hides-all-my-website-components/. – andreivictor May 20 '22 at 13:27
  • If possible, post a sample of the code on Stackblitz - in order to be able to reproduce the issue. – andreivictor May 20 '22 at 13:30
  • Hi andreivictor I could fix the problem by applying `.mat-dialog-content { max-height: 100% !important; }` in styles.css. I can't explain why, maybe it makes some sense to you. Just wanted to inform for maybe a future reference and also to thank you, helped thinking. Cheers – Murilo de Melo Reis May 20 '22 at 17:33
  • I have no clue what it might be, but it's good that it works. Best wishes – andreivictor May 20 '22 at 17:45

1 Answers1

1

I could fix the problem by applying the following in the styles.css file:

.mat-dialog-content {
    max-height: 100% !important;
}

I can't explain why that was necessary. But the dialog stopped shifting the content up when triggered. Just in case someone deals with the same problem. Maybe someone could explain what in my code caused that or why this css element was necessary.

Murilo de Melo Reis
  • 150
  • 1
  • 12
  • Do you have a mat-dialog-content somewhere else besides your dialog? I was seeing the same issue, and my problem was that I had add it a mat-dialog-content inside of a tab. Then when the dialog open, it was messing up the height of the tab. I just replaced the one if the tab for a simple div and that did the trick. – Felipe Centeno Jan 24 '23 at 23:07