'Cannot center the modal window from angular material

It is crazy but the following code:

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material';

@Component({
    selector: 'decline',
    templateUrl: './decline.component.html',
    styleUrls: ['../../../styles/main.css']
})
    
export class DeclineComponent {

    animal: string;
    name: string;
    config: MatDialogConfig = {
        disableClose: false,
        hasBackdrop: true,
        backdropClass: '',
        width: '250px',
        height: '',
        position: {
            top: '',
            bottom: '',
            left: '',
            right: ''
        }
    };
    constructor(public dialog: MatDialog) { }

    openDialog(): void {
        let dialogRef = this.dialog.open(DialogOverviewExampleDialog, this.config);
    }

}

@Component({
    selector: 'dialog-overview-example-dialog',
    template: `
        This is nothing
          `
})
export class DialogOverviewExampleDialog {

    constructor(
        public dialogRef: MatDialogRef<DialogOverviewExampleDialog>) { }

}

does not center (horizontally and vertically) the modal window whereas in all examples I have seen so far, it is nicely centered. I cannot find the problem... I have to say that I am using '~@angular/material/prebuilt-themes/indigo-pink.css". Apart from that, I tried to center it manually by adjusting the position object inside config. However it does not accept something like left: '50%-125px'. Any good ideas, please?

angular angular-material2

Solution 1:^[1]

You are missing the configuration for entryComponent. I was facing the same issue. Adding the Component name to entryComponent in AppModule solved my problem.

Because MatDialog instantiates components at run-time, the Angular compiler needs extra information to create the necessary ComponentFactory for your dialog content component.

For any component loaded into a dialog, you must include your component class in the list of entryComponents in your NgModule definition so that the Angular compiler knows to create the ComponentFactory for it

Add below line of code to the app.module.ts file

entryComponents: [DialogOverviewExampleDialog]

And you don't really need to pass the empty position configuration for the MatDialog, unless you are setting something. This will be the second thing to try after the entryComponent solution, if it doesn't resolve the issue!

Solution 2:^[2]

Step 4 of Angular Material getting started.

// Add this line to style.css of your app.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 4

Be sure that you made all steps before.

Angular Material - Getting started

P.S. It's helped me.

Solution 3:^[3]

You have to configure your dialog content via entryComponents in your app.module.ts file.

You can read about this in the docs: https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code-

ts:

@NgModule({
  imports: [
    // ...
    MatDialogModule
  ],

  declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule() {}

I hope that solves your problem

Solution 4:^[4]

I was having the same type of issue, my modal was showing up on the very bottom left of my page, and would not honor the height/width, etc that I was passing into the dialog.open function, nor was it showing any background, etc.

I just added

../node_modules/@angular/material/prebuilt-themes/indigo-pink.css

to the styles line of my angular-cli.json file, and it now works perfect.

Solution 5:^[5]

Define your config as follows:

config: MatDialogConfig = {
    disableClose: false,
    hasBackdrop: true,
    backdropClass: '',
    width: '250px',
    height: '',
    position: {
        top: '50vh',
        left: '50vw'
    },
    panelClass:'makeItMiddle', //Class Name that can be defined in styles.css as follows:
};

In styles.css file:

.makeItMiddle{
     transform: translate(-50%, -50%);
 }

Solution 6:^[6]

For me, adding align-items: center to .cdk-overlay-pane worked.

::ng-deep .cdk-overlay-pane {
  align-items: center;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Puneet
Solution 2	theruslanusmanov
Solution 3	JiiB
Solution 4	Stephen Rauch
Solution 5	Mario Petrovic
Solution 6

'Cannot center the modal window from angular material

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]