dotnetcore / dotnetcore/BootstrapBlazor

bug(Table): 表格固定列在设置了默认宽度后,调整宽度出现bug

Open
#8,459 1 comment 0 reactions 1 assignee Claimed by @ArgoZhang View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.