Modal / Dialog opens at the bottom of the screen and does not behave correctly

Question

As in the question, my dialog appears at the bottom of the screen, and not in the middle. It also does not close on click, but rather, whenever I press escape. The rest of the page is also not disabled or inaccessible, so I can stack them (see below).

I use basically the 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 import is correct, but here they are:

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

Please note that there is no error or warning in the console, and I tried to disable css.

Has anyone seen this before?

Answer 1

Turns out the problem was how I imported css. I used to import a scss file:

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

, , ; , css index.html:

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

. , , , , , . , -, .

Answer 2

/ angular.

, , css, cli, styles.css

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

Answer 3

index.html angular

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