fix(DataTable): UI error when using FixedHeader and Fixed column toge…

…ther (#1784) * 🐛 fix(DataTable): UI error when using FixedHeader and Fixed column together * 🐛 fix(DataTable): The calculation of column width is not precise enough
masastack · Mar 18, 2024 · 493e16c · 493e16c
1 parent a9e8ee9
commit 493e16c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/Masa.Blazor/Components/DataTable/Colgroup/MDataTableColGroupItem.razor b/src/Masa.Blazor/Components/DataTable/Colgroup/MDataTableColGroupItem.razor
@@ -29,7 +29,8 @@
 
     private async Task OnResizeAsync()
     {
-        Header.RealWidth = await JS.InvokeAsync<double>(JsInteropConstants.GetProp, _el, "offsetWidth");
+        var rect = await JS.InvokeAsync<BoundingClientRect>(JsInteropConstants.GetBoundingClientRect, _el);
+        Header.RealWidth = rect.Width;
         await SimpleTable.DebounceRenderForColResizeAsync();
     }
 

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css
@@ -6,11 +6,6 @@
     color-scheme: dark;
 }
 
-/* fixed-right in datatable */
-.m-data-table--fixed-header > .m-data-table__wrapper > table > thead > tr > th {
-    z-index: 2 !important;
-}
-
 /* fixed in datatable */
 .theme--light.m-data-table > .m-data-table__wrapper > table > tbody > tr:not(.stripe):not(.m-data-table__expanded__content):not(.m-data-table__empty-wrapper):not(.m-data-table__selected),
 .theme--light.m-data-table > .m-data-table__wrapper > table > thead > tr {
@@ -93,6 +88,10 @@
     background: #212121;
 }
 
+.m-data-table--fixed-header > .m-data-table__wrapper > table > thead > tr > th.m-data-table__column--fixed-left {
+    z-index: 3;
+}
+
 /* resizable in datatable */
 
 .m-data-table--resizable > .m-data-table__wrapper > table {

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css