From 144d970d8d42ab59a988600945494f7696d18617 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 11 Nov 2018 21:36:02 +0100 Subject: [PATCH] fix(sidenav): content margins not updated on viewport changes Since the size of the sidenav depends partially on the viewport width, its size can change if the viewport is resized (e.g. the user change their device orientation or they make the window smaller). These changes add some extra logic to update the content margins in such cases. --- src/lib/sidenav/drawer.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index 33744175f88d..19796dc41da9 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -11,7 +11,7 @@ import {Directionality} from '@angular/cdk/bidi'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {ESCAPE} from '@angular/cdk/keycodes'; import {Platform} from '@angular/cdk/platform'; -import {CdkScrollable, ScrollDispatcher} from '@angular/cdk/scrolling'; +import {CdkScrollable, ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling'; import {DOCUMENT} from '@angular/common'; import { AfterContentChecked, @@ -502,7 +502,12 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy private _ngZone: NgZone, private _changeDetectorRef: ChangeDetectorRef, @Inject(MAT_DRAWER_DEFAULT_AUTOSIZE) defaultAutosize = false, - @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) { + @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string, + /** + * @deprecated viewportRuler to become a required parameter. + * @breaking-change 8.0.0 + */ + @Optional() viewportRuler?: ViewportRuler) { // If a `Dir` directive exists up the tree, listen direction changes // and update the left/right properties to point to the proper start/end. @@ -513,6 +518,14 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy }); } + // Since the minimum width of the sidenav depends on the viewport width, + // we need to recompute the margins if the viewport changes. + if (viewportRuler) { + viewportRuler.change() + .pipe(takeUntil(this._destroyed)) + .subscribe(() => this._updateContentMargins()); + } + this._autosize = defaultAutosize; }