Skip to content
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

Jump to bottom

DataGrid - Wrong freeSpace row height calculation in FF 70.0+ #11983

Merged
merged 5 commits into from
Feb 18, 2020
Merged

DataGrid - Wrong freeSpace row height calculation in FF 70.0+ #11983

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
15da92a
DataGrid - Wrong freeSpace row height calculation in FF 70.0+
igormalzew Feb 12, 2020
d327ddc
Extract height correction logic
igormalzew Feb 12, 2020
687c2fb
Simplify height correction logic
igormalzew Feb 13, 2020
f1f8480
Fix tests
igormalzew Feb 13, 2020
d343296
Improve tests
igormalzew Feb 18, 2020
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
8 changes: 7 additions & 1 deletion js/ui/grid_core/ui.grid_core.rows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -830,7 +830,7 @@ module.exports = {
const rowsHeight = that._getRowsHeight(contentElement.children().first());
const $tableElement = $table || that.getTableElements();
const borderTopWidth = Math.ceil(parseFloat($tableElement.css('borderTopWidth')));
const heightCorrection = browser.webkit && that._getDevicePixelRatio() >= 2 ? 1 : 0; // T606935
const heightCorrection = that._getHeightCorrection();
const resultHeight = elementHeightWithoutScrollbar - rowsHeight - borderTopWidth - heightCorrection;

if(showFreeSpaceRow) {
Expand All @@ -853,6 +853,12 @@ module.exports = {
}
},

_getHeightCorrection: function() {
const isZoomedWebkit = browser.webkit && this._getDevicePixelRatio() >= 2; // T606935
const hasExtraBorderTop = browser.mozilla && browser.version >= 70 && !this.option('showRowLines');
return isZoomedWebkit || hasExtraBorderTop ? 1 : 0;
},

_columnOptionChanged: function(e) {
const optionNames = e.optionNames;

Expand Down
3 changes: 2 additions & 1 deletion testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5624,7 +5624,8 @@ QUnit.test('Freespace row have the correct height when using master-detail with
dataRowsHeight += $(this).outerHeight();
});

const expectedFreeSpaceRowHeight = $contentTable.height() - dataRowsHeight;
const heightCorrection = gridInstance.getView('rowsView')._getHeightCorrection();
const expectedFreeSpaceRowHeight = $contentTable.height() - dataRowsHeight - heightCorrection;

// assert
assert.roughEqual($dataGrid.find('.dx-freespace-row').eq(2).height(), expectedFreeSpaceRowHeight, 1, 'Height of the freeSpace row');
Expand Down
29 changes: 23 additions & 6 deletions testing/tests/DevExpress.ui.widgets.dataGrid/rowsView.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2236,19 +2236,18 @@ QUnit.test('Height free space row for virtual scroller', function(assert) {
const dataController = new MockDataController({ items: this.items, virtualItemsCount: { begin: 0, end: 0 } });
const rowsView = this.createRowsView(this.items, dataController);
const $testElement = $('#container');
let freeSpaceRowHeight;
let borderTopWidth;
let tableBorderTopWidth;

// act
rowsView.render($testElement);
rowsView.height(400);
rowsView.resize();
borderTopWidth = Math.ceil(parseFloat($(rowsView.element()).css('borderTopWidth')));
tableBorderTopWidth = Math.ceil(parseFloat(rowsView.getTableElements().css('borderTopWidth')));

const borderTopWidth = Math.ceil(parseFloat($(rowsView.element()).css('borderTopWidth')));
const tableBorderTopWidth = Math.ceil(parseFloat(rowsView.getTableElements().css('borderTopWidth')));
const heightCorrection = rowsView._getHeightCorrection();
const freeSpaceRowHeight = 400 - 3 * rowsView._rowHeight - borderTopWidth - tableBorderTopWidth - heightCorrection;

// assert
freeSpaceRowHeight = 400 - 3 * rowsView._rowHeight - borderTopWidth - tableBorderTopWidth;
assert.equal(rowsView._getFreeSpaceRowElements().css('display'), 'table-row', 'display style is none');
assert.equal(rowsView._getFreeSpaceRowElements()[0].offsetHeight, Math.round(freeSpaceRowHeight), 'height free space row');
});
Expand Down Expand Up @@ -6950,6 +6949,24 @@ if(browser.webkit) {
});
}

QUnit.test('The vertical scrollbar should not be shown if free space row rendered and showRowLines set false', function(assert) {
// arrange
const rows = [{ values: ['test1', 'test2', 'test3', 'test4'], rowType: 'data' }];
const columns = ['field1', 'field2', 'field3', 'field4'];
const rowsView = this.createRowsView(rows, null, columns, null, { scrolling: { useNative: true } });
const $testElement = $('#container');

$testElement.parent().wrap($('<div/>').addClass('dx-widget'));

// act
rowsView.render($testElement);
rowsView.height(700);
rowsView.resize();

// assert
assert.strictEqual(rowsView.getScrollbarWidth(), 0, 'There is no vertical scrollbar');
});

// T697699
QUnit.test('The vertical scrollbar should not be shown if showScrollbar is always', function(assert) {
// arrange
Expand Down