20

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).

enter image description here

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?

Chris Smeal
  • 681
  • 1
  • 6
  • 13
  • 1
    you have some duplicate imports in your module. I'm not sure how Angular behaves with this, but since you have `BrowserAnimationsModule` imported twice, could you try cleaning it up and see what happens? – joh04667 May 24 '17 at 16:21
  • Good catch, but unfortunately, that did not fix the issue. Thanks. – Chris Smeal May 24 '17 at 17:42
  • 2
    Just as another heads up, you have `FormsModule` imported twice. – joh04667 May 24 '17 at 19:04

4 Answers4

26

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.

Edric
  • 24,639
  • 13
  • 81
  • 91
Chris Smeal
  • 681
  • 1
  • 6
  • 13
  • I think that if you use the address as specified below (https://stackoverflow.com/a/49518190/540061), that you'll find it would work. This worked for me. – Robb Sadler Apr 19 '18 at 14:03
18

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";

nacojohn
  • 909
  • 8
  • 8
8

I prefer this method in my angular.json file

"styles": [
              "src/styles/styles.less",             
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"              
            ],
Maccurt
  • 12,655
  • 7
  • 32
  • 43
6

in the index.html add the following link to angular material

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
Lecha Bisultanov
  • 133
  • 1
  • 8