模态/对话框在屏幕底部打开，并且行为不正常 [英] Modal/Dialog is opening at the bottom of the screen, and not behaving properly

问题描述

正如问题所说，我的对话框弹出在屏幕底部，而不是中间.它也不会在点击时关闭，而是在我点击转义时关闭.页面的其余部分也没有被禁用或变灰，因此我可以将它们堆叠起来(见下文).

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
],

请注意，控制台中没有错误或警告，我已尝试禁用 css.

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

有人见过这个吗?

推荐答案

原来问题在于我如何导入 css.以前我是导入到一个 scss 文件中:

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

我确实导入了样式，这就是为什么我认为这已经足够了；显然，您需要在 index.html 中导入 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.

这篇关于模态/对话框在屏幕底部打开，并且行为不正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！