Fix column resizing when in rtl mode

microsoft · Oct 22, 2024 · bca8540 · bca8540
1 parent 7060116
commit bca8540
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/examples/Demo/Shared/Pages/Lab/IssueTester.razor b/examples/Demo/Shared/Pages/Lab/IssueTester.razor
@@ -1 +1 @@
-
+
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js
@@ -133,7 +133,14 @@ export function enableColumnResizing(gridElement) {
             }
 
             const horizontalScrollOffset = document.documentElement.scrollLeft;
-            const width = (horizontalScrollOffset + e.clientX) - headerBeingResized.offsetLeft;
+            let width;
+
+            if (document.body.dir === '' || document.body.dir === 'ltr') {
+                width = (horizontalScrollOffset + e.clientX) - headerBeingResized.offsetLeft;
+            }
+            else {
+                width = headerBeingResized.offsetLeft + headerBeingResized.clientWidth - (horizontalScrollOffset + e.clientX);
+            }
 
             const column = columns.find(({ header }) => header === headerBeingResized);
             column.size = Math.max(minWidth, width) + 'px';