fix: reposition connected overlay on resize

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -95,11 +95,15 @@ export class OverlayRef implements PortalHost {
     // pointer events therefore. Depends on the position strategy and the applied pane boundaries.
     this._togglePointerEvents(false);
 
+    if (this._config.positionStrategy && this._config.positionStrategy.detach) {
+      this._config.positionStrategy.detach();
+    }
+
     if (this._config.scrollStrategy) {
       this._config.scrollStrategy.disable();
     }
 
-    let detachmentResult = this._portalHost.detach();
+    const detachmentResult = this._portalHost.detach();
 
     // Only emit after everything is detached.
     this._detachments.next();

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

@@ -17,6 +17,7 @@ import {
   ScrollingVisibility,
 } from './connected-position';
 import {Subject} from 'rxjs/Subject';
+import {Subscription} from 'rxjs/Subscription';
 import {Observable} from 'rxjs/Observable';
 import {Scrollable} from '@angular/cdk/scrolling';
 import {isElementScrolledOutsideView, isElementClippedByScrolling} from './scroll-clip';
@@ -35,6 +36,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   /** The overlay to which this strategy is attached. */
   private _overlayRef: OverlayRef;
 
+  /** Layout direction of the position strategy. */
   private _dir = 'ltr';
 
   /** The offset in pixels for the overlay connection point on the x-axis */
@@ -46,6 +48,9 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   /** The Scrollable containers used to check scrollable view properties on position change. */
   private scrollables: Scrollable[] = [];
 
+  /** Subscription to viewport resize events. */
+  private _resizeSubscription = Subscription.EMPTY;
+
   /** Whether the we're dealing with an RTL context */
   get _isRtl() {
     return this._dir === 'rtl';
@@ -88,10 +93,19 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   attach(overlayRef: OverlayRef): void {
     this._overlayRef = overlayRef;
     this._pane = overlayRef.overlayElement;
+    this._resizeSubscription.unsubscribe();
+    this._resizeSubscription = this._viewportRuler.change().subscribe(() => this.apply());
   }
 
   /** Performs any cleanup after the element is destroyed. */
-  dispose() { }
+  dispose() {
+    this._resizeSubscription.unsubscribe();
+  }
+
+  /** @docs-private */
+  detach() {
+    this._resizeSubscription.unsubscribe();
+  }
 
   /**
    * Updates the position of the overlay element, using whichever preferred position relative

src/cdk/overlay/position/position-strategy.ts

@@ -18,6 +18,9 @@ export interface PositionStrategy {
   /** Updates the position of the overlay element. */
   apply(): void;
 
+  /** Called when the overlay is detached. */
+  detach?(): void;
+
   /** Cleans up any DOM modifications made by the position strategy, if necessary. */
   dispose(): void;
 }

src/lib/tabs/tab-header.ts

@@ -27,12 +27,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
-  CanDisableRipple,
-  MATERIAL_COMPATIBILITY_MODE,
-  mixinDisableRipple,
-} from '@angular/material/core';
-import {fromEvent} from 'rxjs/observable/fromEvent';
+import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
 import {merge} from 'rxjs/observable/merge';
 import {of as observableOf} from 'rxjs/observable/of';
 import {Subscription} from 'rxjs/Subscription';