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

[XiaoChenDan]

我也有同样问题，这是复现的项目链接：https://github.com/XiaoChenDan/BootstrapBlazor.OnlyServer1。
有两个案例，一个是类似下拉列表，动态呈现Table表格，加了Toolbar显示后，高度是溢出的；另一个是在Tab里嵌入Table表格，当激活另一个TabItem时，高度也是溢出的。

[densen2014]

你先建一个模板工程看一下表格页面应该就理解了

[XiaoChenDan]

明白了，只是需要Table呈现再渲染就不会出现这种问题，像第一个案例就不用display样式来控制，直接@if(ShowDialog)控制；Tab直接IsOnlyRenderActiveTab="true"设置是不会出现高度溢出情况。

[ArgoZhang]

@XiaoChenDan 你的例子我看了，跟原问题有本质区别，你的问题是，你那个所谓 溢出 的表格，初始状态是不可见的。表格组件有一个自适应高度的功能，但是不可见状态下在 HTML 中无法确定高度（高度均为 0），所以自适应脚本未执行，你点击按钮改变显示状态后，表格组件无法获得这个事件，所以表现是溢出，其实是原本高度。这都是 HTML 最基本的高度坑，也是常识。这个问题，一直没有很好的解决，也可以说是一个 bug