Skip to content

Commit c7ad159

Browse files
ChronosSFChronosSF
authored
Merge pull request #7501 from IgniteUI/skrastev/fix-7469-9.1.x
fix(igxGrid): Fix default scrollbars not showing on Mac when visible only on scroll.
2 parents 5bd562f + c98420d commit c7ad159

17 files changed

+60
-55
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -957,7 +957,6 @@
957957
width: 100%;
958958
background: --var($theme, 'header-background');
959959
z-index: 10001;
960-
overflow: hidden;
961960
}
962961

963962
%grid-thead-thumb {

‎projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,19 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
5252
public get size() {
5353
return this._size;
5454
}
55+
56+
public get scrollNativeSize() {
57+
const div = document.createElement('div');
58+
const style = div.style;
59+
style.width = '100px';
60+
style.height = '100px';
61+
style.position = 'absolute';
62+
style.top = '-10000px';
63+
style.top = '-10000px';
64+
style.overflow = 'scroll';
65+
document.body.appendChild(div);
66+
const scrollWidth = div.offsetWidth - div.clientWidth;
67+
document.body.removeChild(div);
68+
return scrollWidth ? scrollWidth + 1 : 1;
69+
}
5570
}

‎projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -709,8 +709,12 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
709709
return this.sizesCache[index + 1] - this.sizesCache[index];
710710
}
711711

712-
public getScrollbarWidth() {
713-
return this.scrollComponent ? (this.scrollComponent as VirtualHelperComponent).scrollWidth : 0;
712+
/**
713+
* @hidden
714+
* Function that is called to get the native scrollbar size that the browsers renders.
715+
*/
716+
public getScrollNativeSize() {
717+
return this.scrollComponent ? this.scrollComponent.scrollNativeSize : 0;
714718
}
715719

716720
/**

‎projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,6 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
2525
}
2626

2727
ngOnInit() {
28-
this.scrollWidth = this.getScrollWidth();
28+
this.scrollWidth = this.scrollNativeSize;
2929
}
30-
31-
private getScrollWidth() {
32-
const div = document.createElement('div');
33-
const style = div.style;
34-
style.width = '100px';
35-
style.height = '100px';
36-
style.position = 'absolute';
37-
style.top = '-10000px';
38-
style.top = '-10000px';
39-
style.overflow = 'scroll';
40-
document.body.appendChild(div);
41-
const scrollWidth = div.offsetWidth - div.clientWidth;
42-
document.body.removeChild(div);
43-
return scrollWidth ? scrollWidth + 1 : 0;
44-
}
45-
4630
}

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
174174
private _cdrRequests = false;
175175
protected _cdrRequestRepaint = false;
176176

177-
public get scrollWidth() {
178-
return this.verticalScrollContainer.getScrollbarWidth();
177+
/**
178+
* @hidden @internal
179+
*/
180+
public get scrollSize() {
181+
return this.verticalScrollContainer.getScrollNativeSize();
179182
}
180183

181184
private _resourceStrings = CurrentResourceStrings.GridResStrings;
@@ -4740,7 +4743,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
47404743
* @hidden @internal
47414744
*/
47424745
public get outerWidth() {
4743-
return this.hasVerticalScroll() ? this.calcWidth + this.scrollWidth : this.calcWidth;
4746+
return this.hasVerticalScroll() ? this.calcWidth + this.scrollSize : this.calcWidth;
47444747
}
47454748

47464749
/**
@@ -4834,7 +4837,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
48344837
}
48354838

48364839
if (this.hasVerticalScroll() && this.width !== null) {
4837-
width -= this.scrollWidth;
4840+
width -= this.scrollSize;
48384841
}
48394842
if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) {
48404843
this.calcWidth = width;
@@ -5005,7 +5008,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
50055008
if (width === null) {
50065009
let currentWidth = this.calcWidth;
50075010
if (this.hasVerticalScroll()) {
5008-
currentWidth += this.scrollWidth;
5011+
currentWidth += this.scrollSize;
50095012
}
50105013
width = currentWidth + 'px';
50115014
this.resetCaches();
@@ -5047,7 +5050,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
50475050
this.calcWidth :
50485051
parseInt(this.width, 10) || parseInt(this.hostWidth, 10) || this.calcWidth;
50495052
if (this.hasVerticalScroll() && !this.isPercentWidth) {
5050-
width -= this.scrollWidth;
5053+
width -= this.scrollSize;
50515054
}
50525055
if (this.pinning.columns === ColumnPinningPosition.End) {
50535056
width -= this.featureColumnsWidth();

‎projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ describe('IgxGrid - Cell component #grid', () => {
201201
// Calculate where the end of the cell is. Relative left position should equal the grid calculated width
202202
expect(lastCell.nativeElement.getBoundingClientRect().left +
203203
lastCell.nativeElement.offsetWidth +
204-
grid.scrollWidth).toEqual(parseInt(grid.width, 10));
204+
grid.scrollSize).toEqual(parseInt(grid.width, 10));
205205
}));
206206

207207
it('should not reduce the width of last pinned cell when there is vertical scroll.', () => {

‎projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -191,9 +191,9 @@ describe('IgxGrid - multi-column headers #grid', () => {
191191
tick();
192192

193193
const locationColGroup = getColGroup(grid, 'Location');
194-
expect(parseInt(locationColGroup.width, 10) + grid.scrollWidth).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
194+
expect(parseInt(locationColGroup.width, 10) + grid.scrollSize).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
195195
const cityColumn = grid.getColumnByName('City');
196-
expect(parseInt(cityColumn.width, 10) + grid.scrollWidth).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
196+
expect(parseInt(cityColumn.width, 10) + grid.scrollSize).toBe(parseInt(componentInstance.gridWrapperWidthPx, 10));
197197
}));
198198

199199
it('Width should be correct. Column group with column. Width in px.', fakeAsync(() => {
@@ -208,9 +208,9 @@ describe('IgxGrid - multi-column headers #grid', () => {
208208
fixture.detectChanges();
209209

210210
const locationColGroup = getColGroup(grid, 'Location');
211-
expect(parseInt(locationColGroup.width, 10) + grid.scrollWidth).toBe(gridWidthPx);
211+
expect(parseInt(locationColGroup.width, 10) + grid.scrollSize).toBe(gridWidthPx);
212212
const cityColumn = grid.getColumnByName('City');
213-
expect(parseInt(cityColumn.width, 10) + grid.scrollWidth).toBe(gridWidthPx);
213+
expect(parseInt(cityColumn.width, 10) + grid.scrollSize).toBe(gridWidthPx);
214214
}));
215215

216216
it('Width should be correct. Column group with column. Width in percent.', fakeAsync(() => {
@@ -226,7 +226,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
226226

227227
const locationColGroup = getColGroup(grid, 'Location');
228228
const gridWidthInPx = ((parseInt(gridWidth, 10) / 100) *
229-
parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollWidth) + 'px';
229+
parseInt(componentInstance.gridWrapperWidthPx, 10) - grid.scrollSize) + 'px';
230230
expect(locationColGroup.width).toBe(gridWidthInPx);
231231
const cityColumn = grid.getColumnByName('City');
232232
expect(cityColumn.width).toBe(gridWidthInPx);

‎projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -746,7 +746,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
746746
const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
747747
const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS));
748748
const filteringCells = fixture.debugElement.queryAll(By.css(COLUMN_FILTER_CELL_SELECTOR));
749-
const expectedWidth = (parseInt(grid.width, 10) - grid.scrollWidth) / 4;
749+
const expectedWidth = (parseInt(grid.width, 10) - grid.scrollSize) / 4;
750750
expect(headers[0].nativeElement.getBoundingClientRect().width).toBeCloseTo(expectedWidth, 0);
751751
expect(headers[1].nativeElement.getBoundingClientRect().width).toBeCloseTo(expectedWidth, 0);
752752
expect(headers[2].nativeElement.getBoundingClientRect().width).toBeCloseTo(expectedWidth, 0);

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
</div>
9696
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
9797
id="right" class="igx-grid__scroll-on-drag-right"></span>
98-
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollWidth"></div>
98+
<div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
9999
</div>
100100

101101
<div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
@@ -201,7 +201,7 @@
201201
</div>
202202
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
203203
id="right" class="igx-grid__scroll-on-drag-right"></span>
204-
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollWidth">
204+
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize">
205205
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
206206
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
207207
<ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
@@ -219,10 +219,10 @@
219219
class="igx-grid__summaries" #summaryRow>
220220
</igx-grid-summary-row>
221221
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'
222-
[style.width.px]="scrollWidth"></div>
222+
[style.width.px]="scrollSize"></div>
223223
</div>
224224

225-
<div class="igx-grid__scroll" #scr [hidden]="isHorizontalScrollHidden">
225+
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden">
226226
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
227227
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
228228
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1655,7 +1655,7 @@ describe('IgxGrid Component Tests #grid', () => {
16551655
grid.nativeElement.querySelector('.igx-grid__thead').getBoundingClientRect().height -
16561656
grid.nativeElement.querySelector('.igx-grid__tfoot').getBoundingClientRect().height -
16571657
grid.nativeElement.querySelector('.igx-grid__scroll').getBoundingClientRect().height;
1658-
expect(parseInt(window.getComputedStyle(gridBody.nativeElement).width, 10) + grid.scrollWidth).toBe(500);
1658+
expect(parseInt(window.getComputedStyle(gridBody.nativeElement).width, 10) + grid.scrollSize).toBe(500);
16591659
expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight);
16601660
});
16611661

0 commit comments

Comments
 (0)