CODEWITHSUNDEEP
angularangular-material2
Unknown developer
Unknown developer

Reputation: 5930

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?

Upvotes: 15

Views: 28185

Answers (6)

Suprabhat Kumar
Suprabhat Kumar

Reputation: 685

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

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

Upvotes: 3

Nishanth
Nishanth

Reputation: 95

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

Upvotes: 2

Puneet
Puneet

Reputation: 1741

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!

Upvotes: 15

theruslanusmanov
theruslanusmanov

Reputation: 354

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.

Upvotes: 22

Chris Wilson
Chris Wilson

Reputation: 135

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.

Upvotes: 2

JiiB
JiiB

Reputation: 1456

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

Upvotes: 7

Related Questions