DataGrid - Sticky Columns: Fix display of fixed columns at different …

…zoom values (#28419)

Co-authored-by: Alyar <>

e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/stickyColumns.ts

@@ -1,6 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import { Selector } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 import { safeSizeTest } from '../../../helpers/safeSizeTest';
 import { createWidget } from '../../../helpers/createWidget';
 import { getData } from '../helpers/generateDataSourceData';
@@ -1318,3 +1318,52 @@ safeSizeTest('The simulated scrollbar should display correctly when there are st
       await changeTheme(Themes.genericLight);
     });
 });
+
+[
+  Themes.genericLight,
+  Themes.materialBlue,
+  Themes.fluentBlue,
+].forEach((theme) => {
+  [0.9, 1.25, 1.5].forEach((zoom) => {
+    safeSizeTest(`Fixed columns should display correctly at ${zoom * 100}% zoom (${theme} theme)`, async (t) => {
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+      const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+      await t.expect(dataGrid.isReady()).ok();
+
+      await takeScreenshot(`fixed_columns_with_${zoom * 100}%_zoom_(${theme}).png`, dataGrid.element);
+
+      await t
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }, [900, 800])
+      .before(async () => {
+        await ClientFunction((zoomValue: number) => {
+          $('body').css('zoom', zoomValue);
+        })(zoom);
+        await changeTheme(theme);
+        await createWidget('dxDataGrid', {
+          dataSource: getData(20, 15),
+          columnWidth: 100,
+          columnAutoWidth: true,
+          customizeColumns: (columns) => {
+            columns[5].fixed = true;
+            columns[5].fixedPosition = 'left';
+            columns[6].fixed = true;
+            columns[6].fixedPosition = 'left';
+
+            columns[8].fixed = true;
+            columns[8].fixedPosition = 'right';
+            columns[9].fixed = true;
+            columns[9].fixedPosition = 'right';
+          },
+        });
+      })
+      .after(async () => {
+        await ClientFunction(() => {
+          $('body').css('zoom', '');
+        })();
+        await changeTheme(Themes.genericLight);
+      });
+  });
+});

packages/devextreme-scss/scss/widgets/base/_gridBase.scss

@@ -625,6 +625,7 @@
   .dx-#{$widget-name}-headers {
     position: relative;
     outline: 0;
+    min-height: 1px;
 
     @include user-select(none);
   }

packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss

@@ -674,10 +674,16 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
   .dx-#{$widget-name}-headers {
     color: $datagrid-columnchooser-item-color;
     touch-action: pinch-zoom;
-    border-bottom: $datagrid-border;
 
-    .dx-#{$widget-name}-content {
-      margin-bottom: -1px;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      pointer-events: none;
+      border-bottom: $datagrid-border;
     }
 
     .dx-#{$widget-name}-table {

packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss

@@ -489,10 +489,16 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
     color: $datagrid-columnchooser-item-color;
     font-weight: $datagrid-columnchooser-font-weight;
     touch-action: pinch-zoom;
-    border-bottom: $datagrid-border;
 
-    .dx-#{$widget-name}-content {
-      margin-bottom: -1px;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      pointer-events: none;
+      border-bottom: $datagrid-border;
     }
 
     .dx-#{$widget-name}-table {

packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss

@@ -642,10 +642,16 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
   .dx-#{$widget-name}-headers {
     color: $datagrid-columnchooser-item-color;
     touch-action: pinch-zoom;
-    border-bottom: $datagrid-border;
 
-    .dx-#{$widget-name}-content {
-      margin-bottom: -1px;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      pointer-events: none;
+      border-bottom: $datagrid-border;
     }
 
     .dx-#{$widget-name}-table {