席-对话框打开在页面底部而不是弹出窗口？
席-对话框打开在页面底部而不是弹出窗口？
提问于 2020-10-13 17:26:37
我正在尝试使用Mat-Dialog打开弹出，但它出现在页面的底部。
我尝试了这两页中的每一个解决方案：
matDialog doesn't open as dialog
Modal/Dialog is opening at the bottom of the screen, and not behaving properly
他们俩都没有正常工作。我的代码如下所示
TS
@Component({
selector: 'cardboxes-linkboxes',
templateUrl: './cardboxes.component.html',
styleUrls: ['./cardboxes.component.scss']
})
export class CardboxesComponent implements OnInit {
constructor(private dialog: MatDialog) { }
ngOnInit() {}
openDialog() {
this.dialog.open(Description)
}
}
@Component({
selector: 'app-description-dialog',
templateUrl: './description-dialog.component.html'
})
export class Description {
constructor(public dialogRef: MatDialogRef<Description>) {}
onNoClick(): void {
this.dialogRef.close()
}
}Styles.scss
@import '~@angular/material/prebuilt-themes/indigo-pink.css';index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">angular.json
"styles": [
"src/styles.scss",
{
"input": "node_modules/@angular/material/prebuilt-themes/purple-green.css"
}
]我还将这两个组件添加到app.module文件中@ngmodule的条目组件中。
这些主要是来自其他问题的建议，但仍然呈现在页面底部，如下所示：
如您所见，对话框位于页面底部，在我的背景图像下面。我希望它以弹出的方式出现在页面上。
我是不是做错了什么事才能让它正常工作呢？
如何使我的弹出窗口出现在我的页面中间？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-10-13 18:07:57
我找到了解决办法。最后，我更改了openDialog()函数，有点像我在网上找到的示例。
openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
height: '300px'
});这样做，再加上上面提到的一切，都奏效了。谢谢大家！
Stack Overflow用户
发布于 2020-10-13 18:16:08
您始终可以通过单击F12查看您的html和css，查看它们是否有问题：
1-点击选择图标
2-然后单击要检查的元素。
3-您拥有与该元素相关的所有css
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64340164
复制相关文章
相似问题
腾讯云开发者
