Skip to content

DataGrid: Fix header borders being cut off above the vertical scrollbar (T1306973) #34372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Alyar666 merged 7 commits into from
Jul 21, 2026
Merged

DataGrid: Fix header borders being cut off above the vertical scrollbar (T1306973) #34372

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0e7ba06
DataGrid: Fix header borders being cut off above the vertical scrollb…
Jul 17, 2026
d3c746d
Add etalons and small test refactoring
Jul 17, 2026
5674499
Add border for scrollbar
Jul 17, 2026
b9126d5
remove etalons
Jul 17, 2026
5e50bbc
Add etalons
Jul 20, 2026
f6c358f
replace paddingLeft and paddingRight to paddingInlineEnd
Jul 20, 2026
f3e1838
Fix jest tests
Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 54 additions & 1 deletion e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
import DataGrid from 'devextreme-testcafe-models/dataGrid';
import { ClassNames } from 'devextreme-testcafe-models/dataGrid/classNames';
import type { DataGridScrollMode } from 'devextreme/ui/data_grid';
import { insertStylesheetRulesToPage } from '../../../helpers/domUtils';
import { insertStylesheetRulesToPage, removeStylesheetRulesFromPage } from '../../../helpers/domUtils';
import url from '../../../helpers/getPageUrl';
import { createWidget } from '../../../helpers/createWidget';
import { salesApiMock } from './apiMocks/salesApiMock';
Expand Down Expand Up @@ -363,6 +363,59 @@ test('Scroll position after grouping when RTL (T388508)', async (t) => {
}],
}));

[false, true].forEach((rtlEnabled) => {
test(`Headers should have a border before the scrollbar gutter when the vertical scrollbar occupies space (rtlEnabled = ${rtlEnabled}) (T1306973)`, async (t) => {
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
const dataGrid = new DataGrid('#container');

await t
.expect(dataGrid.isReady())
.ok();

const headersElement = dataGrid.getHeaders().element;
const paddingProperty = rtlEnabled ? 'padding-left' : 'padding-right';
const padding = parseFloat(await headersElement.getStyleProperty(paddingProperty));

await t
.expect(headersElement.hasClass('dx-datagrid-scroller-spacing'))
.eql(padding > 0);

await testScreenshot(t, takeScreenshot, `grid-headers-scroller-spacing-border${rtlEnabled ? '-rtl' : ''}.png`, { element: '#container' });

await t
.expect(compareResults.isValid())
.ok(compareResults.errorMessages());
}).before(async () => {
await insertStylesheetRulesToPage(`
Comment thread
anna-shakhova marked this conversation as resolved.
::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; }
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 7px; }
`);

return createWidget('dxDataGrid', {
rtlEnabled,
width: 700,
height: 300,
showBorders: true,
dataSource: getData(30, 5),
columns: ['field_0', 'field_1', 'field_2', 'field_3', 'field_4'],
filterRow: {
visible: true,
},
summary: {
totalItems: [{
column: 'field_0',
summaryType: 'count',
}],
},
scrolling: {
useNative: true,
},
});
}).after(async () => {
await removeStylesheetRulesFromPage();
});
});

test('Header container should have padding-right after expanding the master row with a detail grid when using native scrolling (T1004507)', async (t) => {
const dataGrid = new DataGrid('#container');
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
Expand Down
12 changes: 12 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -628,6 +628,12 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
}
}

.dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
> .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
box-shadow: 1px 0 0 $datagrid-border-color;
}
}

.dx-#{$widget-name}-filter-row {
background-color: $datagrid-filter-row-background-color;

Expand Down Expand Up @@ -976,6 +982,12 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
}
}

.dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
> .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
box-shadow: -1px 0 0 $datagrid-border-color;
}
}

.dx-#{$widget-name}-rowsview {
&.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
padding-left: 0;
Expand Down
12 changes: 12 additions & 0 deletions packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,12 @@ $generic-grid-base-cell-input-height: math.round($generic-base-line-height * $ge
}
}

.dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
> .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
box-shadow: 1px 0 0 $datagrid-border-color;
}
}

.dx-#{$widget-name}-filter-row {
.dx-menu {
.dx-overlay-content {
Expand Down Expand Up @@ -837,6 +843,12 @@ $generic-grid-base-cell-input-height: math.round($generic-base-line-height * $ge
}
}

.dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
> .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
box-shadow: -1px 0 0 $datagrid-border-color;
}
}

.dx-#{$widget-name}-filter-row {
.dx-menu {
.dx-menu-item-has-submenu.dx-menu-item-has-icon {
Expand Down
12 changes: 12 additions & 0 deletions packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -602,6 +602,12 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-

}

.dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
> .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
box-shadow: 1px 0 0 $datagrid-border-color;
}
}

.dx-#{$widget-name}-filter-row {
background-color: $datagrid-filter-row-background-color;

Expand Down Expand Up @@ -952,6 +958,12 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
}
}

.dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
> .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
box-shadow: -1px 0 0 $datagrid-border-color;
}
}

.dx-#{$widget-name}-rowsview {
&.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
padding-left: 0;
Expand Down
3 changes: 2 additions & 1 deletion packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import $ from '@js/core/renderer';
import type { Properties as DataGridProperties } from '@js/ui/data_grid';
import DataGrid from '@js/ui/data_grid';
import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
import type { Controllers } from '@ts/grids/grid_core/m_types';
import type { Controllers, Views } from '@ts/grids/grid_core/m_types';

export interface DataGridInstance extends DataGrid {
getController: <T extends keyof Controllers>(name: T) => Controllers[T];
getView: <T extends keyof Views>(name: T) => Views[T];
}

export const SELECTORS = {
Expand Down
55 changes: 55 additions & 0 deletions ...devextreme/js/__internal/grids/grid_core/views/__tests__/columns_view.integration.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import {
afterEach, beforeEach, describe, expect, it,
} from '@jest/globals';

import {
afterTest, beforeTest, createDataGrid,
} from '../../__tests__/__mock__/helpers/utils';

const SCROLLER_SPACING_CLASS = 'dx-datagrid-scroller-spacing';

describe('ColumnsView scroller spacing (T1306973)', () => {
beforeEach(() => {
beforeTest();
});

afterEach(() => {
afterTest();
});

it('should toggle the scroller spacing class on the headers view', async () => {
const { instance } = await createDataGrid({
dataSource: [{ id: 1, a: 'a', b: 'b' }],
columns: ['a', 'b'],
});
const columnHeadersView = instance.getView('columnHeadersView');

columnHeadersView.setScrollerSpacing(15);

expect(columnHeadersView.element().hasClass(SCROLLER_SPACING_CLASS)).toBe(true);
expect(columnHeadersView.element().css('paddingRight')).toBe('15px');

Comment thread
Alyar666 marked this conversation as resolved.
columnHeadersView.setScrollerSpacing(0);

expect(columnHeadersView.element().hasClass(SCROLLER_SPACING_CLASS)).toBe(false);
});

it('should toggle the scroller spacing class on the footer view', async () => {
const { instance } = await createDataGrid({
dataSource: [{ id: 1, a: 'a', b: 'b' }],
columns: ['a', 'b'],
summary: {
totalItems: [{ column: 'a', summaryType: 'count' }],
},
});
const footerView = instance.getView('footerView');

footerView.setScrollerSpacing(15);

expect(footerView.element().hasClass(SCROLLER_SPACING_CLASS)).toBe(true);

footerView.setScrollerSpacing(0);

expect(footerView.element().hasClass(SCROLLER_SPACING_CLASS)).toBe(false);
});
});
1 change: 1 addition & 0 deletions packages/devextreme/js/__internal/grids/grid_core/views/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export const CLASSES = {
firstCell: 'first-cell',
scrollerSpacing: 'scroller-spacing',
};
17 changes: 9 additions & 8 deletions packages/devextreme/js/__internal/grids/grid_core/views/m_columns_view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1486,15 +1486,16 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
/**
* @extended: column_fixing
*/
public setScrollerSpacing(width) {
const that = this;
const $element = that.element();
const rtlEnabled = that.option('rtlEnabled');
public setScrollerSpacing(width: number): void {
const $element = this.element();
const rtlEnabled = this.option('rtlEnabled');

$element && $element.css({
paddingLeft: rtlEnabled ? width : '',
paddingRight: !rtlEnabled ? width : '',
});
$element && $element
.toggleClass(this.addWidgetPrefix(CLASSES.scrollerSpacing), !!width)
.css({
paddingLeft: rtlEnabled ? width : '',
paddingRight: !rtlEnabled ? width : '',
});

@anna-shakhova anna-shakhova Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets replace it with inline start/end paddings

Suggested change
.css({
paddingLeft: rtlEnabled ? width : '',
paddingRight: !rtlEnabled ? width : '',
});
.css({
paddingInlineStart: '',
paddingInlineEnd: width,
});

@Alyar666 Alyar666 Jul 20, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This behavior was already implemented; I didn't change it. However, let's see if we can adjust it, provided the change is relatively inexpensive.

}

protected isScrollbarVisible(isHorizontal) {
Expand Down
Loading