Merge pull request #7972 from IgniteUI/mkirova/fix-7954-9.1.x

Fix issue with height auto-size when page is zoomed.

Author: ChronosSF

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

@@ -4635,14 +4635,37 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return 0;
     }
 
+    /**
+     * @hidden
+     */
+    protected getComputedHeight(elem) {
+        return elem.offsetHeight ? parseFloat(this.document.defaultView.getComputedStyle(elem).getPropertyValue('height')) : 0;
+    }
+    /**
+     * @hidden
+     */
+    protected getFooterHeight(): number {
+        return this.summariesHeight || this.getComputedHeight(this.tfoot.nativeElement);
+    }
+    /**
+     * @hidden
+     */
+    protected getTheadRowHeight(): number {
+        const height = this.getComputedHeight(this.theadRow.nativeElement);
+        return (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
+        height - this.getFilterCellHeight() :
+        height;
+    }
+
     /**
      * @hidden
      */
     protected getToolbarHeight(): number {
         let toolbarHeight = 0;
         if (this.showToolbar && this.toolbarHtml != null) {
+            const height = this.getComputedHeight(this.toolbarHtml.nativeElement);
             toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ?
-                this.toolbarHtml.nativeElement.offsetHeight : 0;
+            height : 0;
         }
         return toolbarHeight;
     }
@@ -4653,8 +4676,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     protected getPagingFooterHeight(): number {
         let pagingHeight = 0;
         if (this.footer) {
+            const height = this.getComputedHeight(this.footer.nativeElement);
             pagingHeight = this.footer.nativeElement.firstElementChild ?
-                this.footer.nativeElement.offsetHeight : 0;
+            height : 0;
         }
         return pagingHeight;
     }
@@ -4677,17 +4701,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (!this._height) {
             return null;
         }
-
-        const actualTheadRow = (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
-            this.theadRow.nativeElement.offsetHeight - this.getFilterCellHeight() :
-            this.theadRow.nativeElement.offsetHeight;
-        const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight - this.tfoot.nativeElement.clientHeight;
+        const actualTheadRow = this.getTheadRowHeight();
+        const footerHeight = this.getFooterHeight();
         const toolbarHeight = this.getToolbarHeight();
         const pagingHeight = this.getPagingFooterHeight();
         const groupAreaHeight = this.getGroupAreaHeight();
+        const scrHeight = this.getComputedHeight(this.scr.nativeElement);
         const renderedHeight = toolbarHeight + actualTheadRow +
             footerHeight + pagingHeight + groupAreaHeight +
-            this.scr.nativeElement.clientHeight;
+            scrHeight;
 
         let gridHeight = 0;
 
@@ -4698,13 +4720,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 const bodyHeight = this.getDataBasedBodyHeight();
                 return bodyHeight > 0 ? bodyHeight : null;
             }
-            gridHeight = parseInt(computed, 10);
+            gridHeight = parseFloat(computed);
         } else {
             gridHeight = parseInt(this._height, 10);
         }
         const height = Math.abs(gridHeight - renderedHeight);
 
-        if (height === 0 || isNaN(gridHeight)) {
+        if (Math.round(height) === 0 || isNaN(gridHeight)) {
             const bodyHeight = this.defaultTargetBodyHeight;
             return bodyHeight > 0 ? bodyHeight : null;
         }

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

@@ -906,7 +906,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     protected getGroupAreaHeight(): number {
-        return this.groupArea ? this.groupArea.nativeElement.offsetHeight : 0;
+        return this.groupArea ? this.getComputedHeight(this.groupArea.nativeElement) : 0;
     }
 
     /**

src/app/grid-column-moving/grid-column-moving.sample.css

@@ -10,3 +10,14 @@
     margin-bottom: 16px;
     max-width: 900px;
 }
+
+.references {
+    font-size: .75em;
+}
+
+.references > p {
+    margin: 0;
+    letter-spacing: initial;
+    line-height: initial;
+    font-size: 1em;
+}

src/app/grid-column-moving/grid-column-moving.sample.html

@@ -22,7 +22,7 @@
                 [filterMode]="'excelStyleFilter'"
                 [paging]="false"
                 [width]="'900px'"
-                [height]="'800px'">
+                >
                 <igx-column *ngFor="let c of columns" [field]="c.field"
                                                     [header]="c.field"
                                                     [movable]="c.movable"
@@ -37,8 +37,9 @@
                                                     [dataType]="c.type">
                 </igx-column>
                 <igx-grid-footer>
-                    <div style='height:200px;'>
-                        Test
+                    <div class="references">
+                       <p>Test</p> 
+                       <p>Test2</p> 
                     </div>
                 </igx-grid-footer>
             </igx-grid>