chore(*): Fix issue with FireFox not displaying vertial scrollbar. Re…

…move hardcoded scrollbar heigth in hierarchical/tree grid.
IgniteUI · Mar 13, 2020 · 01b7c61 · 01b7c61
1 parent 421f600
commit 01b7c61
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 22 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
@@ -710,6 +710,10 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         return this.sizesCache[index + 1] - this.sizesCache[index];
     }
 
+    public getScrollbarWidth() {
+        return this.scrollComponent ? (this.scrollComponent as VirtualHelperComponent).scrollWidth : 0;
+    }
+
     /**
      * Returns the scroll offset of the element at the specified index.
      * ```typescript

diff --git a/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts
@@ -1,14 +1,18 @@
-import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef,
+     ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { VirtualHelperBaseDirective } from './base.helper.component';
 
 @Component({
     selector: 'igx-virtual-helper',
     template: '<div #container class="igx-vhelper__placeholder-content" [style.height.px]="size"></div>'
 })
-export class VirtualHelperComponent extends VirtualHelperBaseDirective implements OnDestroy  {
+export class VirtualHelperComponent extends VirtualHelperBaseDirective implements OnInit, OnDestroy  {
     @HostBinding('scrollTop')
     public scrollTop;
 
+    @HostBinding('style.width.px')
+    public scrollWidth;
+
     @ViewChild('container', { read: ViewContainerRef, static: true }) public _vcr;
     @Input() public itemsLength: number;
 
@@ -20,4 +24,23 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
         super(elementRef, cdr);
     }
 
+    ngOnInit() {
+        this.scrollWidth = this.getScrollWidth();
+    }
+
+    private getScrollWidth() {
+        const div = document.createElement('div');
+        const style = div.style;
+        style.width = '100px';
+        style.height = '100px';
+        style.position = 'absolute';
+        style.top = '-10000px';
+        style.top = '-10000px';
+        style.overflow = 'scroll';
+        document.body.appendChild(div);
+        const scrollWidth = div.offsetWidth - div.clientWidth;
+        document.body.removeChild(div);
+        return scrollWidth;
+    }
+
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -161,14 +161,13 @@ export const IgxGridTransaction = new InjectionToken<string>('IgxGridTransaction
 })
 export class IgxGridBaseDirective extends DisplayDensityBase implements
     OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
-    private _scrollWidth: number;
     private _customDragIndicatorIconTemplate: TemplateRef<any>;
     protected _init = true;
     private _cdrRequests = false;
     protected _cdrRequestRepaint = false;
 
     public get scrollWidth() {
-        return this._scrollWidth;
+        return this.verticalScrollContainer.getScrollbarWidth();
     }
 
     private _resourceStrings = CurrentResourceStrings.GridResStrings;
@@ -2756,7 +2755,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.columnListDiffer = this.differs.find([]).create(null);
         this.calcWidth = this.width && this.width.indexOf('%') === -1 ? parseInt(this.width, 10) : 0;
         this.shouldGenerate = this.autoGenerate;
-        this._scrollWidth = this.getScrollWidth();
     }
 
     protected setupColumns() {
@@ -4755,21 +4753,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return DataType.String;
     }
 
-    private getScrollWidth() {
-        const div = document.createElement('div');
-        const style = div.style;
-        style.width = '100px';
-        style.height = '100px';
-        style.position = 'absolute';
-        style.top = '-10000px';
-        style.top = '-10000px';
-        style.overflow = 'scroll';
-        document.body.appendChild(div);
-        const scrollWidth = div.offsetWidth - div.clientWidth;
-        document.body.removeChild(div);
-        return scrollWidth;
-    }
-
     /**
      * @hidden
      */

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -147,7 +147,7 @@
         [style.width.px]="scrollWidth"></div>
 </div>
 
-<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
+<div class="igx-grid__scroll" #scr [hidden]="isHorizontalScrollHidden">
     <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

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
@@ -126,7 +126,7 @@
         [style.width.px]="scrollWidth"></div>
 </div>
 
-<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
+<div class="igx-grid__scroll" #scr [hidden]="isHorizontalScrollHidden">
     <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>