diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
index f653723438a..40364e7240d 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -2377,6 +2377,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
}
}
+ /**
+ * Returns the `IgxGridHeaderGroupComponent`'s minimum allloed width.
+ * Used internally for restricting header group component width.
+ * The values below depend on the header cell default right/left padding values.
+ * @memberof IgxGridBaseComponent
+ */
+ get defaultHeaderGroupMinWidth(): number {
+ if (this.isCosy()) {
+ return 32;
+ } else if (this.isCompact()) {
+ return 24;
+ } else {
+ return 48;
+ }
+ }
+
/**
* Returns the maximum width of the container for the pinned `IgxColumnComponent`s.
* ```typescript
@@ -2461,6 +2477,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
return this._unpinnedColumns.filter((col) => !col.hidden); // .sort((col1, col2) => col1.index - col2.index);
}
+ /**
+ * Returns the `width` to be set on `IgxGridHeaderGroupComponent`.
+ * @memberof IgxGridBaseComponent
+ */
+ public getHeaderGroupWidth(column: IgxColumnComponent): string {
+
+ const minWidth = this.defaultHeaderGroupMinWidth;
+ if (parseInt(column.width, 10) < this.defaultHeaderGroupMinWidth) {
+ return minWidth.toString();
+ }
+
+ return column.width
+ }
+
/**
* Returns the `IgxColumnComponent` by field name.
* ```typescript
diff --git a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts
index bd9981d6058..77508828ce5 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts
@@ -70,7 +70,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
@HostBinding('style.min-width')
@HostBinding('style.flex-basis')
get width() {
- return this.column.width;
+ return this.grid.getHeaderGroupWidth(this.column);
}
/**
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 2d4d7020863..e9fa79385b1 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
@@ -28,7 +28,8 @@ describe('IgxGrid - Deferred Column Resizing', () => {
GridFeaturesComponent,
LargePinnedColGridComponent,
NullColumnsComponent,
- MultiColumnHeadersComponent
+ MultiColumnHeadersComponent,
+ ColGridComponent
],
imports: [
FormsModule,
@@ -719,6 +720,31 @@ describe('IgxGrid - Deferred Column Resizing', () => {
fixture.detectChanges();
expect(column.width).toEqual('111px');
}));
+
+ fit('should size headers correctly when column width is below the allowed minimum.', fakeAsync(() => {
+ const fixture = TestBed.createComponent(ColGridComponent);
+ fixture.detectChanges();
+ tick();
+ fixture.detectChanges();
+
+ const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+ const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS));
+ const filteringCells = fixture.debugElement.queryAll(By.css('igx-grid-filtering-cell'));
+
+ expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(49);
+ expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(50);
+ expect(headers[2].nativeElement.getBoundingClientRect().width).toBe(49);
+
+ expect(filteringCells[0].nativeElement.getBoundingClientRect().width).toBe(49);
+ expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(50);
+ expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(49);
+
+ expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48);
+ expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50);
+ expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48);
+
+
+ }));
});
@Component({
@@ -827,3 +853,24 @@ export class NullColumnsComponent implements OnInit {
this.data = SampleTestData.contactInfoData();
}
}
+
+
+@Component({
+ template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``,
+ `
+
+
+
+
+ `
+ )
+})
+export class ColGridComponent implements OnInit {
+ data = [];
+
+ @ViewChild(IgxGridComponent) public grid: IgxGridComponent;
+
+ ngOnInit() {
+ this.data = SampleTestData.generateProductData(10);
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
index 6a3ae954eaf..84fe25293bb 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -54,12 +54,12 @@
-
+
-
+
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
index fc113af79b7..643102c070d 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -31,12 +31,12 @@
-
+
-
+