diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 2e12acbf698..d12871fbe18 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -63,6 +63,7 @@ const DEFAULT_DATE_FORMAT = 'mediumDate'; const DEFAULT_TIME_FORMAT = 'mediumTime'; const DEFAULT_DATE_TIME_FORMAT = 'medium'; const DEFAULT_DIGITS_INFO = '1.0-3'; +const CELL_CONTENT_MIN = 32; /* blazorElement */ /* contentParent: ColumnGroup */ @@ -1233,14 +1234,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy if (!this.grid) { return '80'; } - switch (this.grid.gridSize) { - case Size.Medium: - return '64'; - case Size.Small: - return '56'; - default: - return '80'; - } + // the paddings + the min allowed cell content + return (this.grid.defaultHeaderGroupMinWidth + CELL_CONTENT_MIN).toString(); } /** * Returns a reference to the `summaryTemplate`. diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 2cde96bc520..d498ab744f5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3196,7 +3196,7 @@ export abstract class IgxGridBaseDirective implements GridType, private overlayIDs = []; private _sortingStrategy: IGridSortingStrategy; private _pinning: IPinningConfig = { columns: ColumnPinningPosition.Start }; - private _shouldRecalcRowHeight = false; + private _shouldRecalcDefaultSizes = false; private _hostWidth; private _advancedFilteringOverlayId: string; @@ -3270,6 +3270,7 @@ export abstract class IgxGridBaseDirective implements GridType, private _sortDescendingHeaderIconTemplate: TemplateRef = null; private _gridSize: Size = Size.Large; private _defaultRowHeight = 50; + private _defaultCellPadding = 48; /** * @hidden @internal @@ -3688,7 +3689,7 @@ export abstract class IgxGridBaseDirective implements GridType, if (this.shouldResize) { // resizing occurs due to the change of --ig-size css var this._gridSize = this.gridSize; - this.updateDefaultRowHeight(); + this.updateDefaultSizes(); this._autoSize = this.isPercentHeight && this.calcHeight !== this.getDataBasedBodyHeight(); this.crudService.endEdit(false); if (this._summaryRowHeight === 0) { @@ -3924,7 +3925,7 @@ export abstract class IgxGridBaseDirective implements GridType, */ public dataRebinding(event: IForOfDataChangeEventArgs) { if (event.state.chunkSize == 0) { - this._shouldRecalcRowHeight = true; + this._shouldRecalcDefaultSizes = true; } this.dataChanging.emit(event); } @@ -3934,9 +3935,9 @@ export abstract class IgxGridBaseDirective implements GridType, */ public dataRebound(event: IForOfDataChangeEventArgs) { this.selectionService.clearHeaderCBState(); - if (this._shouldRecalcRowHeight) { - this._shouldRecalcRowHeight = false; - this.updateDefaultRowHeight(); + if (this._shouldRecalcDefaultSizes) { + this._shouldRecalcDefaultSizes = false; + this.updateDefaultSizes(); } this.dataChanged.emit(event); } @@ -4368,14 +4369,7 @@ export abstract class IgxGridBaseDirective implements GridType, * The values below depend on the header cell default right/left padding values. */ public get defaultHeaderGroupMinWidth(): number { - switch (this.gridSize) { - case Size.Medium: - return 32; - case Size.Small: - return 24; - default: - return 48; - } + return this._defaultCellPadding; } /** @hidden @internal */ @@ -7806,13 +7800,15 @@ export abstract class IgxGridBaseDirective implements GridType, this._lastSearchInfo.matchCount = this._lastSearchInfo.matchInfoCache.length; } - protected updateDefaultRowHeight() { + protected updateDefaultSizes() { if (this.dataRowList.length > 0 && this.dataRowList.first.cells && this.dataRowList.first.cells.length > 0) { const height = parseFloat(this.document.defaultView.getComputedStyle(this.dataRowList.first.cells.first.nativeElement)?.getPropertyValue('height')); - if (height) { + const padding = parseFloat(this.document.defaultView.getComputedStyle(this.dataRowList.first.cells.first.nativeElement)?.getPropertyValue('padding-left')); + if (height && padding) { this._defaultRowHeight = height; + this._defaultCellPadding = padding * 2; } else { - this._shouldRecalcRowHeight = true; + this._shouldRecalcDefaultSizes = true; } } } diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 98a1950e2a4..46fb7dc5147 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -199,9 +199,10 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { fixture.detectChanges(); expect(column.width).toEqual('80px'); - setElementSize(grid.nativeElement, Size.Medium) + setElementSize(grid.nativeElement, Size.Medium); tick(16); // needed because of the throttleTime of the resize obserer fixture.detectChanges(); + (grid as any).updateDefaultSizes(); expect(column.defaultMinWidth).toBe('64'); UIInteractions.simulateMouseEvent('mousedown', headerResArea, 80, 0); @@ -214,9 +215,10 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { fixture.detectChanges(); expect(column.width).toEqual('64px'); - setElementSize(grid.nativeElement, Size.Small) + setElementSize(grid.nativeElement, Size.Small); tick(16); // needed because of the throttleTime of the resize obserer fixture.detectChanges(); + (grid as any).updateDefaultSizes(); expect(column.defaultMinWidth).toBe('56'); UIInteractions.simulateMouseEvent('mousedown', headerResArea, 64, 0); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index d33e77930c8..e78418073de 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -2514,8 +2514,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni this.theadRow.nativeElement.offsetHeight; } - protected override updateDefaultRowHeight() { - super.updateDefaultRowHeight(); + protected override updateDefaultSizes() { + super.updateDefaultSizes(); if (this.hasHorizontalLayout) { // Trigger pipes to recalc heights for the horizontal layout mrl rows. this.regroupTrigger++;