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 f9ad94fb9b3..a8cbe2afbd8 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -2392,6 +2392,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
}
}
+ /**
+ * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed 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
@@ -2476,6 +2492,22 @@ 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 colWidth = column.width;
+ const minWidth = this.defaultHeaderGroupMinWidth;
+ const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
+
+ if (!isPercentageWidth && parseInt(column.width, 10) < minWidth) {
+ 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..0b170b53421 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
@@ -19,6 +19,7 @@ describe('IgxGrid - Deferred Column Resizing', () => {
configureTestSuite();
const COLUMN_HEADER_CLASS = '.igx-grid__th';
const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item';
+ const COLUMN_FILTER_CELL_SELECTOR = 'igx-grid-filtering-cell';
beforeEach(async(() => {
TestBed.configureTestingModule({
@@ -28,7 +29,9 @@ describe('IgxGrid - Deferred Column Resizing', () => {
GridFeaturesComponent,
LargePinnedColGridComponent,
NullColumnsComponent,
- MultiColumnHeadersComponent
+ MultiColumnHeadersComponent,
+ ColGridComponent,
+ ColPercentageGridComponent
],
imports: [
FormsModule,
@@ -719,6 +722,51 @@ describe('IgxGrid - Deferred Column Resizing', () => {
fixture.detectChanges();
expect(column.width).toEqual('111px');
}));
+
+ it('should size headers correctly when column width is below the allowed minimum.', fakeAsync(() => {
+ const fixture = TestBed.createComponent(ColGridComponent);
+ 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(COLUMN_FILTER_CELL_SELECTOR));
+
+ 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);
+ }));
+
+ it('should size headers correctly when column width is in %.', fakeAsync(() => {
+ const fixture = TestBed.createComponent(ColPercentageGridComponent);
+ 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(COLUMN_FILTER_CELL_SELECTOR));
+
+ expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(100);
+ expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(100);
+ expect(headers[2].nativeElement.getBoundingClientRect().width).toBe(100);
+ expect(headers[3].nativeElement.getBoundingClientRect().width).toBe(100);
+
+ expect(filteringCells[0].nativeElement.getBoundingClientRect().width).toBe(100);
+ expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(100);
+ expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(100);
+ expect(filteringCells[3].nativeElement.getBoundingClientRect().width).toBe(100);
+
+ expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(100);
+ expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(100);
+ expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(100);
+ expect(headerGroups[3].nativeElement.getBoundingClientRect().width).toBe(100);
+ }));
});
@Component({
@@ -827,3 +875,41 @@ 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);
+ }
+}
+
+@Component({
+ template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``,
+ `
+
+
+ `
+ )
+})
+export class ColPercentageGridComponent 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 6bd6caa089c..296827b24f6 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 fb79f3e12e7..db1a34a5f35 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 @@
-
+
-
+