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 d5d1529798d..1d2b99c8a86 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 */ @@ -1206,14 +1207,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; } /** * 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 d439786d7c3..bebb22672d5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3179,7 +3179,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; @@ -3253,6 +3253,7 @@ export abstract class IgxGridBaseDirective implements GridType, private _sortDescendingHeaderIconTemplate: TemplateRef = null; private _gridSize: Size = Size.Large; private _defaultRowHeight = 50; + private _defaultCellPadding = 48; /** * @hidden @internal @@ -3657,7 +3658,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) { @@ -3893,7 +3894,7 @@ export abstract class IgxGridBaseDirective implements GridType, */ public dataRebinding(event: IForOfDataChangingEventArgs) { if (event.state.chunkSize == 0) { - this._shouldRecalcRowHeight = true; + this._shouldRecalcDefaultSizes = true; } this.dataChanging.emit(event); } @@ -3903,9 +3904,9 @@ export abstract class IgxGridBaseDirective implements GridType, */ public dataRebound(event) { this.selectionService.clearHeaderCBState(); - if (this._shouldRecalcRowHeight) { - this._shouldRecalcRowHeight = false; - this.updateDefaultRowHeight(); + if (this._shouldRecalcDefaultSizes) { + this._shouldRecalcDefaultSizes = false; + this.updateDefaultSizes(); } this.dataChanged.emit(event); } @@ -4337,14 +4338,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 */ @@ -7767,13 +7761,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/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index d77dfc4a18a..1f838a43567 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 @@ -2510,8 +2510,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++;