Skip to content

chore(*): Recalc and apply new min widths based on paddings. #15642

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 1 commit into
base: mkirova/tbody-size-refactor
Choose a base branch
from
Open

chore(*): Recalc and apply new min widths based on paddings. #15642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 3 additions & 8 deletions projects/igniteui-angular/src/lib/grids/columns/column.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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`.
Expand Down
30 changes: 13 additions & 17 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 @@ -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;
Expand Down Expand Up @@ -3253,6 +3253,7 @@ export abstract class IgxGridBaseDirective implements GridType,
private _sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
private _gridSize: Size = Size.Large;
private _defaultRowHeight = 50;
private _defaultCellPadding = 48;

/**
* @hidden @internal
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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);
}
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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;
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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++;
Expand Down