fix(igxGrid): Fixing sizing in flexible layout so that grid content can be sized down after being rendered once and then window is resized.

Author: MKirova

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -664,6 +664,7 @@
     %grid-thead-container {
         grid-row: 3;
         display: flex;
+        overflow: hidden;
 
         %igx-grid__drag-indicator {
             cursor: default;
@@ -812,6 +813,7 @@
         position: relative;
         display: flex;
         grid-row: 4;
+        overflow: hidden;
     }
 
     %grid-tbody-message {
@@ -842,6 +844,7 @@
         width: 100%;
         background: --var($theme, 'header-background');
         z-index: 10001;
+        overflow: hidden;
     }
 
     %grid-thead-thumb {
@@ -856,6 +859,7 @@
 
     %grid-tbody-scrollbar {
         border-left: 1px solid igx-color($palette, 'grays', 300);
+        position: relative;
     }
 
     %grid-scroll-start {
@@ -1769,6 +1773,7 @@
         padding: map-get($grouparea-padding, 'comfortable');
         z-index: 2;
         height: 100%;
+        overflow: hidden;
 
         &:focus {
             outline-style: none;

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

@@ -2749,7 +2749,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         });
 
         this.resizeNotify.pipe(destructor, filter(() => !this._init), throttleTime(40))
-            .subscribe(() => this.notifyChanges(true));
+            .subscribe(() => {
+                this.zone.run(() => {
+                    this.notifyChanges(true);
+                });
+            });
 
         this.onPagingDone.pipe(destructor).subscribe(() => {
             this.endEdit(true);

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -1,8 +1,8 @@
-<igx-grid-toolbar [style.width.px]="outerWidth" role="rowgroup" *ngIf="showToolbar" [gridID]="id"
+<igx-grid-toolbar [style.flex-basis.px]="outerWidth" role="rowgroup" *ngIf="showToolbar" [gridID]="id"
     [displayDensity]="displayDensity" #toolbar>
 </igx-grid-toolbar>
 
-<div [style.width.px]='outerWidth' class="igx-grid__grouparea"
+<div [style.flex-basis.px]='outerWidth' class="igx-grid__grouparea"
     *ngIf="groupingExpressions.length > 0 || hasGroupableColumns" #groupArea>
     <igx-chips-area (onReorder)="chipsOrderChanged($event)" (onMoveEnd)="chipsMovingEnded()">
         <ng-container *ngFor="let expr of chipsGoupingExpressions; let last = last;">
@@ -29,7 +29,7 @@
 
 <div class="igx-grid__thead">
     <div class="igx-grid__thead-wrapper" [class.igx-grid__tr--mrl]='hasColumnLayouts' role="rowgroup"
-        [style.width.px]='calcWidth' #theadRow>
+    [style.width.px]='calcWidth' #theadRow>
         <div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
                 [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left"

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -1,4 +1,4 @@
-<igx-grid-toolbar role="rowgroup" [style.width.px]="outerWidth" *ngIf="showToolbar" [gridID]="id"
+<igx-grid-toolbar role="rowgroup" [style.flex-basis.px]="outerWidth" *ngIf="showToolbar" [gridID]="id"
     [displayDensity]="displayDensity" #toolbar>
 </igx-grid-toolbar>
 

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -1,4 +1,4 @@
-<igx-grid-toolbar role="rowgroup" [style.width.px]='outerWidth' *ngIf="showToolbar" [gridID]="id"
+<igx-grid-toolbar role="rowgroup" [style.flex-basis.px]='outerWidth' *ngIf="showToolbar" [gridID]="id"
     [displayDensity]="displayDensity" #toolbar>
 </igx-grid-toolbar>
 
@@ -105,7 +105,7 @@
     </div>
 </div>
 
-<div class="igx-grid__tfoot" [style.width.px]='outerWidth' role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
+<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
     <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
         *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id"
         [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="0"

src/app/grid-flex-layout/grid-flex.sample.html

@@ -2,7 +2,16 @@
     <div igxFlex igxLayout igxLayoutDir="column">
         <div igxFlex>
                 <h4 class="sample-title">Grid1</h4>
-                <igx-grid #grid1 [data]="localData" [autoGenerate]="true">
+                <igx-grid #grid1 [columnPinning]='true' [paging]='true' [data]="localData" [showToolbar]='true' [autoGenerate]="false">
+                    <igx-column *ngFor="let c of columns" [field]="c.field"
+                    [header]="c.field"
+                    [resizable]="true"
+                    [width]="c.width"
+                    [groupable] = 'true'
+                    [hasSummary] = 'true'
+                    [minWidth]="c.minWidth"
+                    [maxWidth]="c.maxWidth" [editable]='true'>
+                </igx-column>
                 </igx-grid>
 
         </div>
@@ -11,5 +20,19 @@ <h4 class="sample-title">Grid2</h4>
                 <igx-grid #grid2 [data]="localData" [autoGenerate]="true">
                 </igx-grid>
         </div>
+
+        <div igxFlex>
+            <h4 class="sample-title">HGrid</h4>
+            <igx-hierarchical-grid [showToolbar]='true' [data]="localData" [autoGenerate]="true" #hGrid2>
+                <igx-row-island [key]="'childData'" [autoGenerate]="true" [allowFiltering]='true'  >
+                </igx-row-island>
+            </igx-hierarchical-grid>
+        </div>
+
+    <div igxFlex>
+        <h4 class="sample-title">TreeGrid</h4>
+        <igx-tree-grid childDataKey="Child" [data]="localData" [autoGenerate]="true">
+        </igx-tree-grid>
+    </div>
     </div>
 </div>

src/app/grid-flex-layout/grid-flex.sample.ts

@@ -13,17 +13,21 @@ export class GridFlexSampleComponent implements OnInit, AfterViewInit {
     public localData;
     @ViewChild('grid1', { static: true })
     grid1: IgxGridComponent;
+    columns;
 
     constructor(){
     }
 
     ngOnInit() {
-        this.localData = [
-            { ID: 1, Name: 'A' },
-            { ID: 2, Name: 'B' },
-            { ID: 3, Name: 'C' },
-            { ID: 4, Name: 'D' },
-            { ID: 5, Name: 'E' }
+        const data = [];
+        for (let i = 0; i < 20; i++) {
+            data.push(  { ID: i, Name: 'A' + i });
+        }
+        this.localData = data;
+
+        this.columns = [
+            { field: 'ID', width: 800, resizable: true, maxWidth: 1000, minWidth: 70 },
+            { field: 'Name', width: 800, resizable: true, maxWidth: 1000, minWidth: 70 }
         ];
     }
     ngAfterViewInit() {