模式/对话框在屏幕底部打开,并且行为不正常 [英] 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
:
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屋!