fix(cdk/overlay): fix overlay margin in isBoundedByLeftViewportEdge (…

…'left-ward') mode
angular · Dec 5, 2023 · 9b86165 · 9b86165
1 parent 0762d69
commit 9b86165
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts
@@ -2000,6 +2000,31 @@ describe('FlexibleConnectedPositionStrategy', () => {
       expect(Math.floor(overlayRect.top)).toBe(viewportMargin);
     });
 
+    it('should calculate the right offset correctly with a viewport margin', async () => {
+      const viewportMargin = 5;
+      const right = 20;
+
+      originElement.style.right = `${right}px`;
+      originElement.style.top = `200px`;
+
+      positionStrategy
+        .withFlexibleDimensions()
+        .withPush(false)
+        .withViewportMargin(viewportMargin)
+        .withPositions([
+          {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+          },
+        ]);
+
+      attachOverlay({positionStrategy});
+
+      expect(overlayRef.hostElement.style.right).toBe(`${right}px`);
+    });
+
     it('should center flexible overlay with push on a scrolled page', () => {
       const veryLargeElement = document.createElement('div');
 

diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
@@ -802,7 +802,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     let width: number, left: number, right: number;
 
     if (isBoundedByLeftViewportEdge) {
-      right = viewport.width - origin.x + this._viewportMargin;
+      right = viewport.width - origin.x + this._viewportMargin * 2;
       width = origin.x - this._viewportMargin;
     } else if (isBoundedByRightViewportEdge) {
       left = origin.x;