Skip to content

Commit 40f8b20

Browse files
crisbetovivian-hu-zz
authored andcommittedJan 16, 2019
fix(overlay): not sizing flexible overlay correctly when opening downwards on a scrollable page (#14672)
Fixes the height of the bounding box being incorrect, if the overlay is flexible, is opening downwards and the page is scrollable.
1 parent 3656a4e commit 40f8b20

File tree

2 files changed

+42
-1
lines changed

2 files changed

+42
-1
lines changed
 

‎src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

+41
Original file line numberDiff line numberDiff line change
@@ -1777,6 +1777,47 @@ describe('FlexibleConnectedPositionStrategy', () => {
17771777
document.body.removeChild(veryLargeElement);
17781778
});
17791779

1780+
it('should size the bounding box correctly when opening downwards on a scrolled page', () => {
1781+
const viewportMargin = 10;
1782+
const veryLargeElement: HTMLElement = document.createElement('div');
1783+
veryLargeElement.style.width = '4000px';
1784+
veryLargeElement.style.height = '4000px';
1785+
document.body.appendChild(veryLargeElement);
1786+
window.scroll(2100, 2100);
1787+
1788+
originElement.style.position = 'fixed';
1789+
originElement.style.top = '100px';
1790+
originElement.style.left = '200px';
1791+
1792+
positionStrategy
1793+
.withFlexibleDimensions()
1794+
.withPush(false)
1795+
.withViewportMargin(viewportMargin)
1796+
.withPositions([{
1797+
overlayY: 'top',
1798+
overlayX: 'start',
1799+
originY: 'bottom',
1800+
originX: 'start'
1801+
}]);
1802+
1803+
attachOverlay({positionStrategy});
1804+
1805+
const boundingBox = overlayContainer
1806+
.getContainerElement()
1807+
.querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement;
1808+
1809+
// Use the `documentElement` here to determine the viewport
1810+
// height since it's what is used by the overlay.
1811+
const viewportHeight = document.documentElement!.clientHeight - (2 * viewportMargin);
1812+
const originRect = originElement.getBoundingClientRect();
1813+
const boundingBoxRect = boundingBox.getBoundingClientRect();
1814+
1815+
expect(Math.floor(boundingBoxRect.height))
1816+
.toBe(Math.floor(viewportHeight - originRect.bottom + viewportMargin));
1817+
1818+
window.scroll(0, 0);
1819+
document.body.removeChild(veryLargeElement);
1820+
});
17801821

17811822
});
17821823

‎src/cdk/overlay/position/flexible-connected-position-strategy.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -711,7 +711,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
711711
if (position.overlayY === 'top') {
712712
// Overlay is opening "downward" and thus is bound by the bottom viewport edge.
713713
top = origin.y;
714-
height = viewport.bottom - origin.y;
714+
height = viewport.height - top + this._viewportMargin;
715715
} else if (position.overlayY === 'bottom') {
716716
// Overlay is opening "upward" and thus is bound by the top viewport edge. We need to add
717717
// the viewport margin back in, because the viewport rect is narrowed down to remove the

0 commit comments

Comments
 (0)
Please sign in to comment.