c# - MatDialog:无论内容大小如何控制整体大小
问题描述
使用 MatBlazor (1.5.4) MatDialog
,我有兴趣将对话框大小固定或设置为总页面的百分比。目前,行为是对话框以适合内容的大小打开。
我尝试在对话框定义的不同部分添加显式样式,但没有成功。
<MatDialog @bind-IsOpen="@IsDialogOpen" Style="width: 600px; height:600px">
<MatDialogTitle>Some title</MatDialogTitle>
<MatDialogContent Style="width: 600px; height:600px">This is the content</MatDialogContent>
<MatDialogActions>
<MatButton OnClick="@(() => this.IsDialogOpen = false)" Icon="close">Close</MatButton>
</MatDialogActions>
</MatDialog>
@code
{
private bool IsDialogOpen { get; set; }
}
似乎没有集成到MatDialog
组件中的显式机制,因此我猜需要显式样式/CSS。
控制对话框大小的正确方法是什么?
解决方案
默认情况下,表面对话框会增长以适应最大宽度为 560 像素的内容。
@media (min-width: 592px) {
.mdc-dialog .mdc-dialog__surface { max-width: 560px; }
}
您应该能够使用您自己的 css 文件覆盖它,该文件在 MatBlazor 删除最大宽度并设置宽度值后加载。如果您想占总屏幕的百分比,您还需要将容器设置为 100% 宽度。
.mdc-dialog .mdc-dialog__container { width: 100%;}
.mdc-dialog .mdc-dialog__surface {
max-width: none;
width: 70%;
}
推荐阅读
- android - Android Studio 选项卡和 ViewPager 渲染
- python - PyQt5 运行默认组合框选择的插槽
- vbscript - 从平面文件中提取特定子字符串后的数字
- ios - UIView 阴影太定义
- mysql - 删除已删除图像的图像 ID
- php - 使用 Ajax 时内容未显示在我的社交媒体网站项目中
- java - NoSuchMethodError 与 FirebaseDatabase.getInstance()
- javascript - A-frame AR的屏幕按钮
- java - 如何在没有 maven 依赖的情况下使用 Mockito
- python - 我正在尝试将前三个高分保存到单独的 txt 文件中