From 02faae44118dd5adbda57a5363567a84c84e7cb2 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 18 Mar 2020 01:05:50 -0400 Subject: [PATCH] fix(resize): add a patch to fix autoresize on Chrome --- packages/common/src/global-grid-options.ts | 2 +- .../interfaces/autoResizeOption.interface.ts | 8 +++--- .../src/examples/example01.ts | 4 +-- .../src/examples/example02.ts | 4 +-- .../vanilla-bundle/src/vanilla-grid-bundle.ts | 28 ++++++++++++++++++- 5 files changed, 36 insertions(+), 10 deletions(-) diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts index 14e3b677d..09b0310c5 100644 --- 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 index 183b72ec1..315fd1ca1 100644 --- 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 index 7452a74a0..b02864908 100644 --- 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 index 1cde47381..4b4d0ca52 100644 --- 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 index 398beeeb6..6458bffd0 100644 --- 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.