Table 在 ShowModal 中出现高度样式错误

[LostRoy]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

在ShowModal中嵌入有固定高度的Table组件,Table的高度会有几率出现错误,概率比较大

Expected Behavior

No response

Steps To Reproduce

Index.razor

@inject DialogService DialogService

@code {
    private async Task ButtonClick()
    {
        await DialogService.ShowModal<TableDemo>(new ResultDialogOption());

    }
}

TableDemo.razor

Height="400" IsFixedHeader

Exceptions (if any)

No response

.NET Version

8.0

Anything else?

BootstrapBlazor: 8.4.1

[bb-auto[bot]]

@LostRoy Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project that illustrates the problem.

[ArgoZhang]

@LostRoy 请更新复现工程链接，提交 Issue 尽量正规。这个问题是非常常见的问题

blazor 是 Web 发开框架，所以要遵循其特点，描述高度的时候，要有一个概念，父容器的高度与自身的高度，从图片中可以看出，是 Table 组件的高度 400px 溢出了父容器 Dialog 身体内部高度，这就是问题的根本原因。

解决办法

1. 给定弹窗样式用于后面对 Table 组件定位使用
2. site.css 样式表中给定弹窗 dialog-body 高度

Table 组件是自适应高度组件，无需你设置 400 你这个高度只能设置 Table 自身高度为 400px 如果弹窗 body 小于 400px 时就会出现图片中的问题

请点击👇 make as anwser