diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1303134_boolean_column_checkboxes_with_fixed_columns (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1303134_boolean_column_checkboxes_with_fixed_columns (fluent.blue.light).png new file mode 100644 index 000000000000..632e7b3d696b Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1303134_boolean_column_checkboxes_with_fixed_columns (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/stickyColumns.ts b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/stickyColumns.ts index 3b4613e932a2..0fe17a68f6ea 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/stickyColumns.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/stickyColumns.ts @@ -232,3 +232,34 @@ test.meta({ browserSize: [1000, 800] })('The grid should display correctly when ...defaultConfig, dataSource: [], })); + +test('Boolean column checkboxes should display correctly when there are fixed columns (T1303134)', async (t) => { + // arrange + const dataGrid = new DataGrid('#container'); + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await t.expect(dataGrid.isReady()).ok(); + + // act + await dataGrid.scrollTo(t, { x: 100 }); + + await testScreenshot(t, takeScreenshot, 'T1303134_boolean_column_checkboxes_with_fixed_columns.png', { element: dataGrid.element }); + + // assert + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => createWidget('dxDataGrid', { + dataSource: [ + { id: 1, text: 'item 1', enabled: false }, + { id: 2, text: 'item 2', enabled: true }, + { id: 3, text: 'item 3' }, + ], + keyExpr: 'id', + columns: [{ + dataField: 'id', + fixed: true, + }, 'enabled', 'text'], + columnWidth: 200, + width: 400, +})); diff --git a/packages/devextreme-scss/scss/widgets/fluent/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/checkBox/_index.scss index e4407a113db2..35250bf909bd 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/checkBox/_index.scss @@ -21,7 +21,7 @@ font-size: $fluent-checkbox-icon-font-size; &::before { - z-index: 2; + z-index: 1; } } diff --git a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss index d46841298d93..aed69faa598c 100644 --- a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss @@ -86,7 +86,7 @@ $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } &::before { - z-index: 2; + z-index: 1; } .dx-checkbox-checked & {