Skip to content

fix(Grid): Add better handling for fraction numbers, as result of zoom. #16411

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

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix(Grid): Add better handling for fraction numbers, as result of zoom. #16411

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
bd22a61
fix(Grid): Add better handling for fraction numbers, as result of zoom.
Oct 31, 2025
8a5f266
chore(*): Remove leftover console.log.
Oct 31, 2025
aa86b81
chore(*): Remove renderedActualRowHeight, since we now measure whole …
Nov 5, 2025
f646c61
chore(*): Fix by calculating border separately.
Nov 5, 2025
9ef60f3
chore(*): Adjust test to not compare to hardcoded value.
Nov 5, 2025
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
62 changes: 31 additions & 31 deletions projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,7 +423,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
}

public isScrollable() {
return this.scrollComponent.size > parseInt(this.igxForContainerSize, 10);
return this.scrollComponent.size > parseFloat(this.igxForContainerSize);
}

/**
Expand Down Expand Up @@ -556,8 +556,8 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
}
const containerSize = 'igxForContainerSize';
if (containerSize in changes && !changes[containerSize].firstChange && this.igxForOf) {
const prevSize = parseInt(changes[containerSize].previousValue, 10);
const newSize = parseInt(changes[containerSize].currentValue, 10);
const prevSize = parseFloat(changes[containerSize].previousValue);
const newSize = parseFloat(changes[containerSize].currentValue);
this._recalcOnContainerChange({prevSize, newSize});
}
}
Expand Down Expand Up @@ -614,7 +614,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
return false;
}
const originalVirtScrollTop = this._virtScrollPosition;
const containerSize = parseInt(this.igxForContainerSize, 10);
const containerSize = parseFloat(this.igxForContainerSize);
const maxVirtScrollTop = this._virtSize - containerSize;

this._bScrollInternal = true;
Expand All @@ -627,7 +627,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
if (Math.abs(add / this._virtRatio) < 1) {
// Actual scroll delta that was added is smaller than 1 and onScroll handler doesn't trigger when scrolling < 1px
const scrollOffset = this.fixedUpdateAllElements(this._virtScrollPosition);
// scrollOffset = scrollOffset !== parseInt(this.igxForItemSize, 10) ? scrollOffset : 0;
// scrollOffset = scrollOffset !== parseFloat(this.igxForItemSize, 10) ? scrollOffset : 0;
this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
}

Expand Down Expand Up @@ -659,7 +659,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
if (index < 0 || index > (this.isRemote ? this.totalItemCount : this.igxForOf.length) - 1) {
return;
}
const containerSize = parseInt(this.igxForContainerSize, 10);
const containerSize = parseFloat(this.igxForContainerSize);
const isPrevItem = index < this.state.startIndex || this.scrollPosition > this.sizesCache[index];
let nextScroll = isPrevItem ? this.sizesCache[index] : this.sizesCache[index + 1] - containerSize;
if (nextScroll < 0) {
Expand All @@ -684,7 +684,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
*/
public scrollNext() {
const scr = Math.abs(Math.ceil(this.scrollPosition));
const endIndex = this.getIndexAt(scr + parseInt(this.igxForContainerSize, 10), this.sizesCache);
const endIndex = this.getIndexAt(scr + parseFloat(this.igxForContainerSize), this.sizesCache);
this.scrollTo(endIndex);
}

Expand All @@ -707,7 +707,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
* ```
*/
public scrollNextPage() {
this.addScroll(parseInt(this.igxForContainerSize, 10));
this.addScroll(parseFloat(this.igxForContainerSize));
}

/**
Expand All @@ -718,7 +718,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
* ```
*/
public scrollPrevPage() {
const containerSize = (parseInt(this.igxForContainerSize, 10));
const containerSize = (parseFloat(this.igxForContainerSize));
this.addScroll(-containerSize);
}

Expand All @@ -741,7 +741,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
// fisrt item is not fully in view
startIndex++;
}
const endIndex = this.getIndexAt(this.scrollPosition + parseInt(this.igxForContainerSize, 10), this.sizesCache);
const endIndex = this.getIndexAt(this.scrollPosition + parseFloat(this.igxForContainerSize), this.sizesCache);
return endIndex - startIndex;
}

Expand Down Expand Up @@ -780,7 +780,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
* ```
*/
public getScrollForIndex(index: number, bottom?: boolean) {
const containerSize = parseInt(this.igxForContainerSize, 10);
const containerSize = parseFloat(this.igxForContainerSize);
const scroll = bottom ? Math.max(0, this.sizesCache[index + 1] - containerSize) : this.sizesCache[index];
return scroll;
}
Expand All @@ -805,7 +805,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
this._embeddedViews.map(view =>
view.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE) || view.rootNodes[0].nextElementSibling)[index - this.state.startIndex] : null;
const rowHeight = this.getSizeAt(index);
const containerSize = parseInt(this.igxForContainerSize, 10);
const containerSize = parseFloat(this.igxForContainerSize);
const containerOffset = -(this.scrollPosition - this.sizesCache[this.state.startIndex]);
const endTopOffset = targetNode ? targetNode.offsetTop + rowHeight + containerOffset : containerSize + rowHeight;
return !targetNode || targetNode.offsetTop < Math.abs(containerOffset)
Expand All @@ -828,7 +828,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
const rNode = rNodes[i];
if (rNode) {
const height = window.getComputedStyle(rNode).getPropertyValue('height');
const h = parseFloat(height) || parseInt(this.igxForItemSize, 10);
const h = parseFloat(height) || parseFloat(this.igxForItemSize);
const index = this.state.startIndex + i;
if (!this.isRemote && !this.igxForOf[index]) {
continue;
Expand Down Expand Up @@ -863,7 +863,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
}
const scrToBottom = this._isScrolledToBottom && !this.dc.instance.notVirtual;
if (scrToBottom && !this._isAtBottomIndex) {
const containerSize = parseInt(this.igxForContainerSize, 10);
const containerSize = parseFloat(this.igxForContainerSize);
const maxVirtScrollTop = this._virtSize - containerSize;
this._bScrollInternal = true;
this._virtScrollPosition = maxVirtScrollTop;
Expand Down Expand Up @@ -912,7 +912,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
*/
protected onScroll(event) {
/* in certain situations this may be called when no scrollbar is visible */
if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
if (!parseFloat(this.scrollComponent.nativeElement.style.height)) {
return;
}
if (!this._bScrollInternal) {
Expand Down Expand Up @@ -1100,7 +1100,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
protected onHScroll(event) {
/* in certain situations this may be called when no scrollbar is visible */
const firstScrollChild = this.scrollComponent.nativeElement.children.item(0) as HTMLElement;
if (!parseInt(firstScrollChild.style.width, 10)) {
if (!parseFloat(firstScrollChild.style.width)) {
return;
}
if (!this._bScrollInternal) {
Expand Down Expand Up @@ -1272,7 +1272,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
let maxLength = 0;
const arr = [];
let sum = 0;
const availableSize = parseInt(this.igxForContainerSize, 10);
const availableSize = parseFloat(this.igxForContainerSize);
if (!availableSize) {
return 0;
}
Expand Down Expand Up @@ -1302,7 +1302,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
const prevItem = this.igxForOf[prevIndex];
const prevSize = dimension === 'height' ?
this.individualSizeCache[prevIndex] :
parseInt(prevItem[dimension], 10);
parseFloat(prevItem[dimension]);
sum = arr.reduce(reducer, prevSize);
arr.unshift(prevItem);
length = arr.length;
Expand Down Expand Up @@ -1349,19 +1349,19 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
const scrollable = containerSizeInfo ? this.scrollComponent.size > containerSizeInfo.prevSize : this.isScrollable();
if (this.igxForScrollOrientation === 'horizontal') {
const totalWidth = parseInt(this.igxForContainerSize, 10) > 0 ? this._calcSize() : 0;
if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
const totalWidth = parseFloat(this.igxForContainerSize) > 0 ? this._calcSize() : 0;
if (totalWidth <= parseFloat(this.igxForContainerSize)) {
this.resetScrollPosition();
}
this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
this.scrollComponent.size = totalWidth;
}
if (this.igxForScrollOrientation === 'vertical') {
const totalHeight = this._calcSize();
if (totalHeight <= parseInt(this.igxForContainerSize, 10)) {
if (totalHeight <= parseFloat(this.igxForContainerSize)) {
this.resetScrollPosition();
}
this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px';
this.scrollComponent.nativeElement.style.height = parseFloat(this.igxForContainerSize) + 'px';
this.scrollComponent.size = totalHeight;
}
if (scrollable !== this.isScrollable()) {
Expand Down Expand Up @@ -1453,7 +1453,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
}

protected _calcVirtualScrollPosition(scrollPosition: number) {
const containerSize = parseInt(this.igxForContainerSize, 10);
const containerSize = parseFloat(this.igxForContainerSize);
const maxRealScrollPosition = this.scrollComponent.size - containerSize;
const realPercentScrolled = maxRealScrollPosition !== 0 ? scrollPosition / maxRealScrollPosition : 0;
const maxVirtScroll = this._virtSize - containerSize;
Expand All @@ -1462,7 +1462,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U

protected _getItemSize(item, dimension: string): number {
const dim = item ? item[dimension] : null;
return typeof dim === 'number' ? dim : parseInt(this.igxForItemSize, 10) || 0;
return typeof dim === 'number' ? dim : parseFloat(this.igxForItemSize) || 0;
}

protected _updateScrollOffset() {
Expand All @@ -1485,8 +1485,8 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
if (Math.abs(sizeDiff) > 0 && this.scrollPosition > 0) {
this.recalcUpdateSizes();
const offset = this.igxForScrollOrientation === 'horizontal' ?
parseInt(this.dc.instance._viewContainer.element.nativeElement.style.left, 10) :
parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
parseFloat(this.dc.instance._viewContainer.element.nativeElement.style.left) :
parseFloat(this.dc.instance._viewContainer.element.nativeElement.style.top);
const newSize = this.sizesCache[this.state.startIndex] - offset;
this.scrollPosition = newSize;
if (this.scrollPosition !== newSize) {
Expand Down Expand Up @@ -1651,8 +1651,8 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
}
const containerSize = 'igxForContainerSize';
if (containerSize in changes && !changes[containerSize].firstChange && this.igxForOf) {
const prevSize = parseInt(changes[containerSize].previousValue, 10);
const newSize = parseInt(changes[containerSize].currentValue, 10);
const prevSize = parseFloat(changes[containerSize].previousValue);
const newSize = parseFloat(changes[containerSize].currentValue);
this._recalcOnContainerChange({prevSize, newSize});
}
}
Expand Down Expand Up @@ -1700,7 +1700,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
}

public override onScroll(event) {
if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
if (!parseFloat(this.scrollComponent.nativeElement.style.height)) {
return;
}
if (!this._bScrollInternal) {
Expand All @@ -1719,7 +1719,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
public override onHScroll(scrollAmount) {
/* in certain situations this may be called when no scrollbar is visible */
const firstScrollChild = this.scrollComponent.nativeElement.children.item(0) as HTMLElement;
if (!this.scrollComponent || !parseInt(firstScrollChild.style.width, 10)) {
if (!this.scrollComponent || !parseFloat(firstScrollChild.style.width)) {
return;
}
// Updating horizontal chunks
Expand All @@ -1744,7 +1744,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
size = item.height;
}
} else {
size = parseInt(item[dimension], 10) || 0;
size = parseFloat(item[dimension]) || 0;
}
return size;
}
Expand Down
17 changes: 10 additions & 7 deletions projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3364,6 +3364,7 @@ export abstract class IgxGridBaseDirective implements GridType,
private _sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
private _gridSize: Size = Size.Large;
private _defaultRowHeight = 50;
private _borderSize = 1;
private _rowCount: number;
private _cellMergeMode: GridCellMergeMode = GridCellMergeMode.onSort;
private _columnsToMerge: IgxColumnComponent[] = [];
Expand Down Expand Up @@ -5632,7 +5633,7 @@ export abstract class IgxGridBaseDirective implements GridType,
if (this.hasCellsToMerge) {
return this.rowHeight;
}
return this.rowHeight + 1;
return this.rowHeight + this._borderSize;
}

/**
Expand Down Expand Up @@ -7871,12 +7872,7 @@ export abstract class IgxGridBaseDirective implements GridType,
}

protected get renderedActualRowHeight() {
let border = 1;
if (this.rowList.toArray().length > 0) {
const rowStyles = this.document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
border = rowStyles.borderBottomWidth ? Math.ceil(parseFloat(rowStyles.borderBottomWidth)) : border;
}
return this.rowHeight + border;
return this.rowHeight + this._borderSize;
}

private executeCallback(rowIndex, visibleColIndex = -1, cb: (args: any) => void = null) {
Expand Down Expand Up @@ -8148,6 +8144,13 @@ export abstract class IgxGridBaseDirective implements GridType,
} else {
this._shouldRecalcRowHeight = true;
}

const rowStyles = this.document.defaultView.getComputedStyle(this.dataRowList.first.nativeElement);

const border = rowStyles.borderBottomWidth ? parseFloat(rowStyles.borderBottomWidth) : 1;
if (border) {
this._borderSize = border;
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -940,7 +940,7 @@ describe('IgxGrid - multi-row-layout #grid', () => {

// check group size is correct
expect(horizontalVirtualization.getSizeAt(0)).toBe(700);
expect(horizontalVirtualization.getSizeAt(1)).toBe(300);
expect(horizontalVirtualization.getSizeAt(1)).toBe(grid.calcWidth * 0.5);

// check DOM
gridFirstRow = grid.rowList.first;
Expand Down Expand Up @@ -968,7 +968,7 @@ describe('IgxGrid - multi-row-layout #grid', () => {

// check group size is correct
expect(horizontalVirtualization.getSizeAt(0)).toBe(700);
expect(horizontalVirtualization.getSizeAt(1)).toBe(300);
expect(horizontalVirtualization.getSizeAt(1)).toBe(grid.calcWidth * 0.5);
expect(horizontalVirtualization.getSizeAt(2)).toBe(136 * 4);

// check DOM
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
[igxForContainerSize]="calcHeight"
[igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
[igxGridForOfVariableSizes]="false"

#verticalScrollContainer (dataChanging)="dataRebinding($event)" (dataChanged)="dataRebound($event)">
<ng-template
[igxTemplateOutlet]="recordTemplate"
Expand Down
Loading