Skip to content

Commit 4c1e37a

Browse files
MayaKirovaMayaKirova
authored
Removing hardcoded values that limit widths and don't allow users to set custom styles that change size. (#16201)
1 parent 894a1d1 commit 4c1e37a

23 files changed

+130
-113
lines changed

‎projects/igniteui-angular-elements/src/analyzer/elements.config.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,6 @@ export var registerConfig = [
274274
{ name: "virtualizationState" },
275275
{ name: "nativeElement" },
276276
{ name: "defaultRowHeight" },
277-
{ name: "defaultHeaderGroupMinWidth" },
278277
{ name: "columns" },
279278
{ name: "pinnedColumns" },
280279
{ name: "pinnedStartColumns" },
@@ -571,7 +570,6 @@ export var registerConfig = [
571570
{ name: "virtualizationState" },
572571
{ name: "nativeElement" },
573572
{ name: "defaultRowHeight" },
574-
{ name: "defaultHeaderGroupMinWidth" },
575573
{ name: "columns" },
576574
{ name: "pinnedColumns" },
577575
{ name: "pinnedStartColumns" },
@@ -755,7 +753,6 @@ export var registerConfig = [
755753
{ name: "virtualizationState" },
756754
{ name: "nativeElement" },
757755
{ name: "defaultRowHeight" },
758-
{ name: "defaultHeaderGroupMinWidth" },
759756
{ name: "columns" },
760757
{ name: "pinnedStartColumns" },
761758
{ name: "pinnedEndColumns" },
@@ -882,7 +879,6 @@ export var registerConfig = [
882879
{ name: "cdr" },
883880
{ name: "nativeElement" },
884881
{ name: "defaultRowHeight" },
885-
{ name: "defaultHeaderGroupMinWidth" },
886882
{ name: "columns" },
887883
{ name: "pinnedStartColumns" },
888884
{ name: "pinnedEndColumns" },
@@ -1034,7 +1030,6 @@ export var registerConfig = [
10341030
{ name: "virtualizationState" },
10351031
{ name: "nativeElement" },
10361032
{ name: "defaultRowHeight" },
1037-
{ name: "defaultHeaderGroupMinWidth" },
10381033
{ name: "columns" },
10391034
{ name: "pinnedColumns" },
10401035
{ name: "pinnedStartColumns" },

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -939,8 +939,6 @@ export interface GridType extends IGridDataBindable {
939939
/** The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling */
940940
rowHeight: number;
941941
multiRowLayoutRowSize: number;
942-
/** Minimal width for headers */
943-
defaultHeaderGroupMinWidth: any;
944942
maxLevelHeaderDepth: number;
945943
defaultRowHeight: number;
946944
/** The default font size, calculated for each element */

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,21 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
7676
public expressionsList: ExpressionUI[];
7777
public moreFiltersCount = 0;
7878

79+
@HostBinding('class.igx-grid-th--pinned')
80+
public get pinnedCss() {
81+
return this.column.pinned;
82+
}
83+
84+
@HostBinding('class.igx-grid-th--pinned-last')
85+
public get pinnedLastCss() {
86+
return !this.column.grid.hasColumnLayouts ? this.column.isLastPinned : false;
87+
}
88+
89+
@HostBinding('class.igx-grid-th--pinned-first')
90+
public get pinnedFirstCSS() {
91+
return !this.column.grid.hasColumnLayouts ? this.column.isFirstPinned : false;;
92+
}
93+
7994
private baseClass = 'igx-grid__filtering-cell-indicator';
8095

8196
constructor(

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4560,24 +4560,6 @@ export abstract class IgxGridBaseDirective implements GridType,
45604560
}
45614561
}
45624562

4563-
/**
4564-
* Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width.
4565-
*
4566-
* @remarks
4567-
* Used internally for restricting header group component width.
4568-
* The values below depend on the header cell default right/left padding values.
4569-
*/
4570-
public get defaultHeaderGroupMinWidth(): number {
4571-
switch (this.gridSize) {
4572-
case Size.Medium:
4573-
return 32;
4574-
case Size.Small:
4575-
return 24;
4576-
default:
4577-
return 48;
4578-
}
4579-
}
4580-
45814563
/** @hidden @internal */
45824564
public get pinnedStartWidth() {
45834565
if (!isNaN(this._pinnedStartWidth)) {
@@ -4617,17 +4599,13 @@ export abstract class IgxGridBaseDirective implements GridType,
46174599
public getHeaderCellWidth(element: HTMLElement): ISizeInfo {
46184600
const range = this.document.createRange();
46194601
const headerWidth = this.platform.getNodeSizeViaRange(range,
4620-
element,
4621-
element.parentElement);
4602+
element, element);
46224603

46234604
const headerStyle = this.document.defaultView.getComputedStyle(element);
46244605
const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
46254606
parseFloat(headerStyle.borderRightWidth);
46264607

4627-
// Take into consideration the header group element, since column pinning applies borders to it if its not a columnGroup.
4628-
const headerGroupStyle = this.document.defaultView.getComputedStyle(element.parentElement);
4629-
const borderSize = parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth);
4630-
return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) };
4608+
return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding) };
46314609
}
46324610

46334611
/**
@@ -4743,7 +4721,7 @@ export abstract class IgxGridBaseDirective implements GridType,
47434721
public getHeaderGroupWidth(column: IgxColumnComponent): string {
47444722
return this.hasColumnLayouts
47454723
? ''
4746-
: `${Math.max(parseFloat(column.calcWidth), this.defaultHeaderGroupMinWidth)}px`;
4724+
: `${parseFloat(column.calcWidth)}px`;
47474725
}
47484726

47494727
/**

‎projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -861,9 +861,9 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
861861
expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(50);
862862
expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(49);
863863

864-
expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48);
864+
expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(49);
865865
expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50);
866-
expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48);
866+
expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(49);
867867
});
868868

869869
it('should size headers correctly when column width is in %.', () => {

‎projects/igniteui-angular/src/lib/grids/grid/column.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ describe('IgxGrid - Column properties #grid', () => {
259259
expect(item.width).toEqual('200px');
260260
});
261261
const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS));
262-
expect(headers[0].nativeElement.style['min-width']).toEqual('200px');
262+
expect(headers[0].nativeElement.clientWidth).toEqual(200);
263263
});
264264

265265
it('headers and cells classes should be correct after scroll horizontal', async () => {

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1888,9 +1888,12 @@ describe('IgxGrid Component Tests #grid', () => {
18881888
expect(hScroll.nativeElement.hidden).toBe(true);
18891889

18901890
for (let i = 0; i < grid.columnList.length; i++) {
1891-
const header = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[i];
1891+
const header = fix.debugElement.queryAll(By.css('igx-grid-header'))[i];
18921892
const cell = fix.debugElement.queryAll(By.css('igx-grid-cell'))[i];
1893-
expect(header.nativeElement.offsetWidth).toEqual(cell.nativeElement.offsetWidth);
1893+
const headerStyle = document.defaultView.getComputedStyle(header.nativeElement);
1894+
const paddingsAndBorders = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
1895+
parseFloat(headerStyle.borderRightWidth);
1896+
expect(header.nativeElement.offsetWidth).toEqual(Math.max(cell.nativeElement.offsetWidth, paddingsAndBorders));
18941897
expect(Number.isInteger(header.nativeElement.offsetWidth)).toBe(true);
18951898
}
18961899
});

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@
6565
(click)="groupClicked($event)"
6666
(pointerenter)="onPinterEnter()"
6767
(pointerleave)="onPointerLeave()"
68+
[style.max-width]="column.resolvedWidth"
69+
[style.flex-basis]="column.resolvedWidth"
6870
>
6971
@if (column.collapsible) {
7072
<div class="igx-grid-th__expander" (pointerdown)="onPointerDownIndicator($event)" (click)="toggleExpandState($event)">
@@ -83,9 +85,7 @@
8385
<igx-grid-header-group class="igx-grid-thead__subgroup"
8486
[ngClass]="child.headerGroupClasses"
8587
[ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
86-
[column]="child"
87-
[style.min-width]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
88-
[style.flex-basis]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
88+
[column]="child">
8989
</igx-grid-header-group>
9090
}
9191
}
@@ -111,12 +111,13 @@
111111
[ghostHost]="grid.outlet.nativeElement"
112112
[attr.droppable]="true"
113113
(pointerdown)="activate()"
114+
[style.width]="column.resolvedWidth"
114115
[igxColumnMovingDrop]="column"
115116
[column]="column"
116117
>
117118
</igx-grid-header>
118119
@if (grid.allowFiltering && grid.filterMode === 'quickFilter') {
119-
<igx-grid-filtering-cell [column]="column" [attr.draggable]="false"></igx-grid-filtering-cell>
120+
<igx-grid-filtering-cell [column]="column" [attr.draggable]="false" [style.width]="column.resolvedWidth"></igx-grid-filtering-cell>
120121
}
121122
@if (!column.columnGroup && column.resizable) {
122123
<span class="igx-grid-th__resize-handle"

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-
2020
import { ColumnType, GridType, IGX_GRID_BASE } from '../common/grid.interface';
2121
import { GridSelectionMode } from '../common/enums';
2222
import { PlatformUtil } from '../../core/utils';
23-
import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from './pipes';
23+
import { IgxHeaderGroupStylePipe } from './pipes';
2424
import { IgxResizeHandleDirective } from '../resizing/resize-handle.directive';
2525
import { IgxIconComponent } from '../../icon/icon.component';
2626
import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive';
@@ -36,7 +36,7 @@ const Z_INDEX = 9999;
3636
changeDetection: ChangeDetectionStrategy.OnPush,
3737
selector: 'igx-grid-header-group',
3838
templateUrl: './grid-header-group.component.html',
39-
imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe]
39+
imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupStylePipe]
4040
})
4141
export class IgxGridHeaderGroupComponent implements DoCheck {
4242

@@ -60,6 +60,11 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
6060
return this.column.colStart;
6161
}
6262

63+
@HostBinding('class.igx-grid-th--pinned')
64+
public get pinnedCss() {
65+
return this.column.pinned;
66+
}
67+
6368
public get headerID() {
6469
return `${this.grid.id}_-1_${this.column.level}_${this.column.visibleIndex}`;
6570
}
@@ -121,21 +126,6 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
121126
public filteringService: IgxFilteringService,
122127
protected platform: PlatformUtil) { }
123128

124-
@HostBinding('class.igx-grid-th--pinned')
125-
public get pinnedCss() {
126-
return this.isPinned;
127-
}
128-
129-
@HostBinding('class.igx-grid-th--pinned-last')
130-
public get pinnedLastCss() {
131-
return this.isLastPinned;
132-
}
133-
134-
@HostBinding('class.igx-grid-th--pinned-first')
135-
public get pinnedFirstCSS() {
136-
return this.isFirstPinned;
137-
}
138-
139129
@HostBinding('class.igx-grid__drag-col-header')
140130
public get headerDragCss() {
141131
return this.isHeaderDragged;

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,7 @@
6666
<igx-grid-header-group
6767
[ngClass]="column.headerGroupClasses"
6868
[ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
69-
[column]="column"
70-
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
71-
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
69+
[column]="column">
7270
</igx-grid-header-group>
7371
}
7472
}
@@ -85,9 +83,7 @@
8583
<igx-grid-header-group
8684
[ngClass]="column.headerGroupClasses"
8785
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
88-
[column]="column"
89-
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
90-
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
86+
[column]="column">
9187
</igx-grid-header-group>
9288
</ng-template>
9389

@@ -98,8 +94,6 @@
9894
[ngClass]="column.headerGroupClasses"
9995
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
10096
[column]="column"
101-
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
102-
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
10397
[style.left]="column.rightPinnedOffset">
10498
</igx-grid-header-group>
10599
}

0 commit comments

Comments
 (0)