fix(resize): add a patch to fix autoresize on Chrome

ghiscoding · Mar 18, 2020 · 02faae4 · 02faae4
1 parent d22ee64
commit 02faae4
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 10 deletions.
diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -15,7 +15,7 @@ export const GlobalGridOptions: GridOption = {
     bottomPadding: 20,
     minHeight: 180,
     minWidth: 300,
-    sidePadding: 0
+    rightPadding: 0
   },
   cellHighlightCssClass: 'slick-cell-modified',
   checkboxSelector: {

diff --git a/packages/common/src/interfaces/autoResizeOption.interface.ts b/packages/common/src/interfaces/autoResizeOption.interface.ts
@@ -5,8 +5,8 @@ export interface AutoResizeOption {
   /** bottom padding of the grid in pixels */
   bottomPadding?: number;
 
-  /** container id */
-  containerId?: string;
+  /** container selector, for example '.myGrid' or '#myGrid' */
+  container?: string;
 
   /** maximum height (pixels) of the grid */
   maxHeight?: number;
@@ -20,8 +20,8 @@ export interface AutoResizeOption {
   /** minimum width (pixels) of the grid */
   minWidth?: number;
 
-  /** side (left/right) padding in pixels */
-  sidePadding?: number;
+  /** padding on the right side of the grid (pixels) */
+  rightPadding?: number;
 
   /** defaults to 10ms, delay before triggering the auto-resize (only on 1st page load) */
   delay?: number;

diff --git a/packages/vanilla-bundle-examples/src/examples/example01.ts b/packages/vanilla-bundle-examples/src/examples/example01.ts
@@ -1,4 +1,4 @@
-import { FieldType, GroupTotalFormatters, Formatters, OperatorType } from '@slickgrid-universal/common';
+import { FieldType, GroupTotalFormatters, Formatters, OperatorType, GridOption } from '@slickgrid-universal/common';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
 
 const actionFormatter = (row, cell, value, columnDef, dataContext) => {
@@ -22,7 +22,7 @@ export class Example1 {
   gridClass;
   gridClassName;
   columnDefinitions;
-  gridOptions;
+  gridOptions: GridOption;
   dataset;
   dataviewObj: any;
   gridObj: any;

diff --git a/packages/vanilla-bundle-examples/src/examples/example02.ts b/packages/vanilla-bundle-examples/src/examples/example02.ts
@@ -1,4 +1,4 @@
-import { Aggregators, FieldType, Sorters, SortDirectionNumber, Grouping, GroupTotalFormatters, Formatters } from '@slickgrid-universal/common';
+import { Aggregators, FieldType, Sorters, SortDirectionNumber, Grouping, GroupTotalFormatters, Formatters, GridOption } from '@slickgrid-universal/common';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
 
 const actionFormatter = (row, cell, value, columnDef, dataContext) => {
@@ -22,7 +22,7 @@ export class Example2 {
   gridClass;
   gridClassName;
   columnDefinitions;
-  gridOptions;
+  gridOptions: GridOption;
   dataset;
   dataviewObj: any;
   gridObj: any;

diff --git a/packages/vanilla-bundle/src/vanilla-grid-bundle.ts b/packages/vanilla-bundle/src/vanilla-grid-bundle.ts
@@ -40,6 +40,9 @@ import {
   CollectionService,
   GroupingAndColspanService,
   SlickgridConfig,
+
+  // utilities
+  getScrollBarWidth,
 } from '@slickgrid-universal/common';
 
 import { TranslateService } from './services/translate.service';
@@ -187,7 +190,7 @@ export class VanillaGridBundle {
     }
   }
 
-  initialization(gridContainerElm: Element) {
+  async initialization(gridContainerElm: Element) {
     // create the slickgrid container and add it to the user's grid container
     this._gridContainerElm = gridContainerElm;
     this._gridElm = document.createElement('div');
@@ -240,6 +243,8 @@ export class VanillaGridBundle {
     if (this._gridOptions.enableAutoResize) {
       const resizer = new Slick.Plugins.Resizer(this._gridOptions.autoResize);
       this.grid.registerPlugin(resizer);
+      await resizer.resizeGrid();
+      this.compensateHorizontalScroll(this.grid);
     }
 
     // user might want to hide the header row on page load but still have `enableFiltering: true`
@@ -362,6 +367,27 @@ export class VanillaGridBundle {
     }
   }
 
+  /**
+   * For some reason this only seems to happen in Chrome and is sometime miscalculated by SlickGrid measureScrollbar() method
+   * When that happens we will compensate and resize the Grid Viewport to avoid seeing horizontal scrollbar
+   * Most of the time it happens, it's a tiny offset calculation of usually 3px (enough to show scrollbar)
+   * GitHub issue reference: https://github.com/6pac/SlickGrid/issues/275
+   */
+  compensateHorizontalScroll(grid: any) {
+    const scrollbarDimensions = grid && grid.getScrollbarDimensions();
+    const slickGridScrollbarWidth = scrollbarDimensions && scrollbarDimensions.width;
+    const calculatedScrollbarWidth = getScrollBarWidth();
+
+    // if scrollbar width is different from SlickGrid calculation to our custom calculation
+    // then resize the grid with the missing pixels to remove scroll (usually only 3px)
+    const containerNode = grid && grid.getContainerNode && grid.getContainerNode() || '';
+    if (slickGridScrollbarWidth < calculatedScrollbarWidth && containerNode && containerNode.clientWidth) {
+      const previousWidth = containerNode && containerNode.clientWidth || 0;
+      containerNode.style.width = `${previousWidth + (calculatedScrollbarWidth - slickGridScrollbarWidth)}px`;
+      grid.resizeCanvas();
+    }
+  }
+
   /**
    * Dynamically change or update the column definitions list.
    * We will re-render the grid so that the new header and data shows up correctly.