diff --git a/src/cdk/overlay/overlay-directives.spec.ts b/src/cdk/overlay/overlay-directives.spec.ts index b5c9517a99fe..135e98e4965e 100644 --- a/src/cdk/overlay/overlay-directives.spec.ts +++ b/src/cdk/overlay/overlay-directives.spec.ts @@ -333,6 +333,32 @@ describe('Overlay directives', () => { expect(Math.floor(triggerRect.bottom)).toBe(Math.floor(overlayRect.top)); }); + it('should take the offset from the position', () => { + const trigger = fixture.nativeElement.querySelector('#trigger'); + + trigger.style.position = 'fixed'; + trigger.style.top = '200px'; + trigger.style.left = '200px'; + + fixture.componentInstance.positionOverrides = [{ + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'top', + offsetX: 20, + offsetY: 10 + }]; + + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + const triggerRect = trigger.getBoundingClientRect(); + const overlayRect = getPaneElement().getBoundingClientRect(); + + expect(Math.floor(overlayRect.top)).toBe(Math.floor(triggerRect.top) + 10); + expect(Math.floor(overlayRect.left)).toBe(Math.floor(triggerRect.left) + 20); + }); + }); describe('outputs', () => { @@ -418,8 +444,8 @@ class ConnectedOverlayDirectiveTest { height: number | string; minWidth: number | string; minHeight: number | string; - offsetX = 0; - offsetY = 0; + offsetX: number; + offsetY: number; triggerOverride: CdkOverlayOrigin; hasBackdrop: boolean; backdropClickHandler = jasmine.createSpy('backdropClick handler'); diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts index c67416501477..69ef03b4739b 100644 --- a/src/cdk/overlay/overlay-directives.ts +++ b/src/cdk/overlay/overlay-directives.ts @@ -111,8 +111,8 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { private _hasBackdrop = false; private _lockPosition = false; private _backdropSubscription = Subscription.EMPTY; - private _offsetX: number = 0; - private _offsetY: number = 0; + private _offsetX: number; + private _offsetY: number; private _position: FlexibleConnectedPositionStrategy; /** Origin for the connected overlay. */ @@ -307,8 +307,8 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges { originY: pos.originY, overlayX: pos.overlayX, overlayY: pos.overlayY, - offsetX: this.offsetX, - offsetY: this.offsetY + offsetX: pos.offsetX || this.offsetX, + offsetY: pos.offsetY || this.offsetY })); positionStrategy.withPositions(positions);