dotnetcore / dotnetcore/BootstrapBlazor
bug(Table): 表格固定列在设置了默认宽度后,调整宽度出现bug
- Dominant language
- C#
- Stars
- 4.9k
- Forks
- 393
- Avg merge
- 9h 47m
- Merged PRs (30d)
- 64
Description
### Is there an existing issue for this?
- [x] I have searched the existing issues
### Describe the bug
表格固定列设置了默认宽度,在调整宽度时,会出现固定列重叠,表格错位的bug
### Expected Behavior
期望固定列在设置了默认宽度后,仍然可以自由调整宽度,且表格不会显示错位
### Interactive render mode
Interactive Server (Interactive server-side rendering (interactive SSR) using Blazor Server)
### Steps To Reproduce
附件中的表格,设置了前2列固定,并设置Width为100,表格设置了AllowResizing=true。
调整最前1列列宽时,发现调整宽度不能小于100px,查看了网页代码,发现表格列的style设置了width=100px的同时设置了min-width=100px,导致列宽无法小于100px。我并没有设置最小列宽,不知道自动设置min-width的用意是什么。
如果强行将第1列往小于100px的宽度拉,会导致第2列的left属性不正确,导致表格横向滚动时,固定列会重叠。而且再次将第1列调宽时,第2列会出现错位。如附件视频所示
查看了Table.razor.js源码,在调用resizeNextFixedColumnWidth时,将calcColWidth直接传入有问题,因为设置了min-width属性,列宽实际不能缩小时,传入calcColWidth的值会小于列宽,这时就会出现后1列的left属性小于前1列的列宽,横向滚动固定列就出现了重叠。
BootstrapBlazor版本为10.10.2,浏览器为Edge
[BootstrapBlazorApp1.Server.zip](https://github.com/user-attachments/files/32142193/BootstrapBlazorApp1.Server.zip)
https://github.com/user-attachments/assets/9e65604a-9b9a-4678-bf58-7351d2026706
### Exceptions (if any)
_No response_
### .NET Version
NET9.0
### Anything else?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.