Set snack bar to be responsive.

Author: josephperrott

src/demo-app/snack-bar/snack-bar-demo.ts

@@ -33,7 +33,7 @@ export class SnackBarDemo {
     let config = new MatSnackBarConfig();
     config.verticalPosition = this.verticalPosition;
     config.horizontalPosition = this.horizontalPosition;
-    config.duration = this.autoHide;
+    config.duration = this.setAutoHide ? this.autoHide: 0;
     config.extraClasses = this.addExtraClass ? ['party'] : undefined;
     config.direction = this.dir.value;
     this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);

src/lib/snack-bar/snack-bar-container.scss

@@ -8,7 +8,7 @@ $mat-snack-bar-spacing-margin: 24px !default;
 
 .mat-snack-bar-container {
   border-radius: 2px;
-  box-sizing: content-box;
+  box-sizing: border-box;
   display: block;
   margin: $mat-snack-bar-spacing-margin;
   max-width: $mat-snack-bar-max-width;
@@ -44,3 +44,17 @@ $mat-snack-bar-spacing-margin: 24px !default;
     border: solid 1px;
   }
 }
+
+/**
+ * The mat-snack-bar-handset class will be applied to the overlay
+ * element causing styling to both it and the snack bar container.
+ */
+.mat-snack-bar-handset {
+  width: 100%;
+
+  .mat-snack-bar-container {
+    margin: 0;
+    max-width: inherit;
+    width: 100%;
+  }
+}

src/lib/snack-bar/snack-bar-container.ts

@@ -33,6 +33,7 @@ import {
   PortalHostDirective,
 } from '@angular/cdk/portal';
 import {first} from '@angular/cdk/rxjs';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {MatSnackBarConfig} from './snack-bar-config';
@@ -83,6 +84,9 @@ export class MatSnackBarContainer extends BasePortalHost implements OnDestroy {
   /** Subject for notifying that the snack bar has finished entering the view. */
   _onEnter: Subject<any> = new Subject();
 
+  /** Whether the snackbar is currently displaying on a mobile screen.. */
+  _isHandset: boolean;
+
   /** The state of the snack bar animations. */
   _animationState = 'void';
 

src/lib/snack-bar/snack-bar-module.ts

@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {PortalModule} from '@angular/cdk/portal';
 import {LIVE_ANNOUNCER_PROVIDER} from '@angular/cdk/a11y';
+import {LayoutModule} from '@angular/cdk/layout';
 import {MatCommonModule} from '@angular/material/core';
 import {MatSnackBar} from './snack-bar';
 import {MatSnackBarContainer} from './snack-bar-container';
@@ -23,6 +24,7 @@ import {SimpleSnackBar} from './simple-snack-bar';
     PortalModule,
     CommonModule,
     MatCommonModule,
+    LayoutModule,
   ],
   exports: [MatSnackBarContainer, MatCommonModule],
   declarations: [MatSnackBarContainer, SimpleSnackBar],

src/lib/snack-bar/snack-bar.ts

@@ -15,6 +15,8 @@ import {SimpleSnackBar} from './simple-snack-bar';
 import {MAT_SNACK_BAR_DATA, MatSnackBarConfig} from './snack-bar-config';
 import {MatSnackBarContainer} from './snack-bar-container';
 import {MatSnackBarRef} from './snack-bar-ref';
+import {Observable} from 'rxjs/Observable';
+import {BreakpointObserver, Breakpoints, BreakpointState} from '@angular/cdk/layout';
 
 
 /**
@@ -47,6 +49,7 @@ export class MatSnackBar {
       private _overlay: Overlay,
       private _live: LiveAnnouncer,
       private _injector: Injector,
+      private _breakpointObserver: BreakpointObserver,
       @Optional() @SkipSelf() private _parentSnackBar: MatSnackBar) {}
 
   /**
@@ -145,6 +148,18 @@ export class MatSnackBar {
     // We can't pass this via the injector, because the injector is created earlier.
     snackBarRef.instance = contentRef.instance;
 
+    // Subscribe to the breakpoint observer and attacg the mat-snack-bar-handset class as
+    // appropriate. This class is applied to the overlay element because the overlay must expand to
+    // fill the width of the screen for full width snackbars.
+    const isHandset = this._breakpointObserver.observe(Breakpoints.Handset).subscribe(state => {
+      overlayRef.overlayElement.classList.toggle('mat-snack-bar-handset', state.matches);
+    });
+    // Unsubscribe from the isHandset subscription when the overlay is detached from the view.
+    const overlayDetach = overlayRef.detachments().subscribe(() => {
+      overlayDetach.unsubscribe();
+      isHandset.unsubscribe();
+    });
+
     return snackBarRef;
   }