diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index 5648048ff1..4d706cf1fc 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -208,7 +208,8 @@ @if (ResizableColumns) { -
+ var top = DisplayMode == DataGridDisplayMode.Table ? "top: 4px;" : "top: 2px;"; + } } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.css b/src/Core/Components/DataGrid/FluentDataGrid.razor.css index dc08949a64..c6e8928a24 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.css +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.css @@ -67,7 +67,6 @@ .fluent-data-grid .resize-handle { position: absolute; - top: 5px; right: 0; left: unset; bottom: 0; diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.ts b/src/Core/Components/DataGrid/FluentDataGrid.razor.ts index 00501799bf..7fc770ddc9 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.ts +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.ts @@ -218,8 +218,11 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid { const resizedivs = header.querySelectorAll('.actual-resize-handle'); resizedivs.forEach(div => div.remove()); + // get the top of the first resize-handle + const resizeTop = (header.querySelector('.resize-handle') as HTMLElement)?.offsetTop ?? 2; + // add a new resize div - const div = createDiv(resizeHandleHeight, isRTL); + const div = createDiv(resizeHandleHeight, resizeTop, isRTL); header.appendChild(div); setListeners(div, isRTL); }); @@ -302,10 +305,10 @@ export namespace Microsoft.FluentUI.Blazor.DataGrid { }); } - function createDiv(height: number, isRTL: boolean) { + function createDiv(height: number, top: number, isRTL: boolean) { const div = document.createElement('div'); div.className = 'actual-resize-handle'; - div.style.top = '5px'; + div.style.top = top + 'px'; div.style.position = 'absolute'; div.style.cursor = 'col-resize'; div.style.userSelect = 'none'; diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs index f28abfabda..5a5bb247c9 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs @@ -46,7 +46,7 @@ public FluentDataGridCell(LibraryConfiguration configuration) : base(configurati .AddStyle("height", $"{Grid.ItemSize.ToString(CultureInfo.InvariantCulture):0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize) .AddStyle("height", $"{((int)Grid.RowSize).ToString(CultureInfo.InvariantCulture)}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null) && InternalGridContext.TotalItemCount > 0) .AddStyle("height", "100%", Grid.MultiLine) - .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default) + .AddStyle("min-height", "40px", Owner.RowType != DataGridRowType.Default) .AddStyle("z-index", ZIndex.DataGridHeaderPopup.ToString(CultureInfo.InvariantCulture), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0 && Grid.UseMenuService) .AddStyle(Owner.Style) .Build(); diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css index e2c8fe59d4..1a657f4346 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.css +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.css @@ -51,7 +51,7 @@ font-weight: 600; text-align: center; position: relative; - padding: 5px 1px; + padding: 0px 1px; } .fluent-data-grid .col-sort-button { diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html index bd729e4c31..ca6d65618a 100644 --- a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html +++ b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html @@ -2,7 +2,7 @@| + |
Name
diff --git a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html
index bd729e4c31..ca6d65618a 100644
--- a/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html
+++ b/tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html
@@ -2,7 +2,7 @@
|
|---|