fix(GlobalPositionStrategy): justifyContent center ignored when direc…

…tion is RTL (#11877)
angular · Jun 29, 2018 · 6b1f703 · 6b1f703
1 parent 11d7080
commit 6b1f703
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/cdk/overlay/position/global-position-strategy.spec.ts b/src/cdk/overlay/position/global-position-strategy.spec.ts
@@ -270,6 +270,20 @@ describe('GlobalPositonStrategy', () => {
       expect(elementStyle.height).toBe('300px');
     });
 
+  it('should center the element in RTL', () => {
+      attachOverlay({
+          direction: 'rtl',
+          positionStrategy: overlay.position()
+              .global()
+              .centerHorizontally()
+              .centerVertically()
+      });
+
+      const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;
+      expect(parentStyle.justifyContent).toBe('center');
+      expect(parentStyle.alignItems).toBe('center');
+  });
+
   it('should invert `justify-content` when using `left` in RTL', () => {
     attachOverlay({
       positionStrategy: overlay.position().global().left('0'),

diff --git a/src/cdk/overlay/position/global-position-strategy.ts b/src/cdk/overlay/position/global-position-strategy.ts
@@ -169,6 +169,8 @@ export class GlobalPositionStrategy implements PositionStrategy {
 
     if (config.width === '100%') {
       parentStyles.justifyContent = 'flex-start';
+    } else if (this._justifyContent === 'center') {
+        parentStyles.justifyContent = 'center';
     } else if (this._overlayRef.getConfig().direction === 'rtl') {
       // In RTL the browser will invert `flex-start` and `flex-end` automatically, but we
       // don't want that because our positioning is explicitly `left` and `right`, hence