Modal/Dialog is opening at the bottom of the screen, and not behaving properly

Question

Like the question says, my dialog is popping up on the bottom of the screen, rather than in the middle. It also does not close on click, but rather whenever I hit escape. The rest of the page is also not disabled or grayed out, so I can stack them up (see below).

I'm using basically the exact same code as in the example

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
    selector: 'dialog-overview-example',
    template: '<button md-button (click)="openDialog()">Open dialog</button>'
})
export class DialogOverviewExample {
    constructor(public dialog: MdDialog) {}

    public openDialog(): void {
        this.dialog.open(BasicDialog);
    }
}

@Component({
    selector: 'dialog-overview-example-dialog',
    template: "<p> Hi, I'm a dialog! </p>",
})
export class BasicDialog {}

I think my imports are correct, but here they are:

imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(ROUTES, {useHash: true}),
    MdDialogModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    CommonModule
],

Note that there is no error or warning in the console, and I have tried disabling css.

Anyone seen this before?

Answer 1

Turns out the issue was with how I was importing css. Previously I was importing into an scss file:

@import '../../node_modules/@angular/material/prebuilt-themes/purple-green.css';

I did import the stylings, which is why I thought that was enough, however; apparently, you need to import the css in your index.html:

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

So there it is. In retrospect, it should have been obvious from the beginning, but like I said, I assumed it was correctly imported because the style was actually imported. Also, I tried importing a minified version, and that also did not work.

Answer 2

The issue is not importing/including the angular material theme.

To solve this issue, kindly add the code in your global css, if using cli, then add to your styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Answer 3

I prefer this method in my angular.json file

"styles": [
              "src/styles/styles.less",             
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"              
            ],