diff --git a/src/lib/snack-bar/simple-snack-bar.html b/src/lib/snack-bar/simple-snack-bar.html
index caf229d516c6..52d14fb40b35 100644
--- a/src/lib/snack-bar/simple-snack-bar.html
+++ b/src/lib/snack-bar/simple-snack-bar.html
@@ -1,2 +1,2 @@
-{{message}}
+{{message}}
diff --git a/src/lib/snack-bar/simple-snack-bar.scss b/src/lib/snack-bar/simple-snack-bar.scss
index 1610d7f64515..94a73c4c4880 100644
--- a/src/lib/snack-bar/simple-snack-bar.scss
+++ b/src/lib/snack-bar/simple-snack-bar.scss
@@ -2,6 +2,8 @@
@import '../core/style/button-common';
@import '../core/style/list-common';
+$mat-snack-bar-button-margin: 48px !default;
+
:host {
display: flex;
justify-content: space-between;
@@ -13,20 +15,15 @@
}
}
-.mat-simple-snackbar-message {
- @include mat-truncate-line;
-}
-
.mat-simple-snackbar-action {
@include mat-button-reset;
background: none;
- margin: -5px 0 0;
- padding: 5px;
text-transform: uppercase;
color: inherit;
- line-height: inherit;
+ line-height: 1;
flex-shrink: 0;
+ margin-left: $mat-snack-bar-button-margin;
font: {
family: inherit;
size: inherit;
diff --git a/src/lib/snack-bar/snack-bar-container.scss b/src/lib/snack-bar/snack-bar-container.scss
index 7b8748a805b4..3617296df813 100644
--- a/src/lib/snack-bar/snack-bar-container.scss
+++ b/src/lib/snack-bar/snack-bar-container.scss
@@ -2,7 +2,6 @@
@import '../core/a11y/a11y';
$mat-snack-bar-padding: 14px 24px !default;
-$mat-snack-bar-height: 20px !default;
$mat-snack-bar-min-width: 288px !default;
$mat-snack-bar-max-width: 568px !default;
@@ -13,10 +12,8 @@ $mat-snack-bar-max-width: 568px !default;
border-radius: 2px;
box-sizing: content-box;
display: block;
- height: $mat-snack-bar-height;
max-width: $mat-snack-bar-max-width;
min-width: $mat-snack-bar-min-width;
- overflow: hidden;
padding: $mat-snack-bar-padding;
// Initial transformation is applied to start snack bar out of view.
transform: translateY(100%);
diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts
index 2eef079ec69a..4a6b4d670bde 100644
--- a/src/lib/snack-bar/snack-bar.spec.ts
+++ b/src/lib/snack-bar/snack-bar.spec.ts
@@ -70,9 +70,9 @@ describe('MdSnackBar', () => {
let snackBarRef = snackBar.open('Snack time!', 'CHEW');
viewContainerFixture.detectChanges();
- let messageElement = overlayContainerElement.querySelector('.mat-simple-snackbar-message');
- expect(messageElement.textContent)
- .toBe('Snack time!', 'Expected snack bar to show a message without a ViewContainerRef');
+ let messageElement = overlayContainerElement.querySelector('snack-bar-container');
+ expect(messageElement.textContent).toContain('Snack time!',
+ 'Expected snack bar to show a message without a ViewContainerRef');
snackBarRef.dismiss();
viewContainerFixture.detectChanges();
@@ -95,10 +95,9 @@ describe('MdSnackBar', () => {
expect(snackBarRef.instance.snackBarRef)
.toBe(snackBarRef, 'Expected the snack bar reference to be placed in the component instance');
- let messageElement = overlayContainerElement.querySelector('span.mat-simple-snackbar-message');
- expect(messageElement.tagName).toBe('SPAN', 'Expected snack bar message element to be ');
+ let messageElement = overlayContainerElement.querySelector('snack-bar-container');
expect(messageElement.textContent)
- .toBe(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
+ .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
let buttonElement = overlayContainerElement.querySelector('button.mat-simple-snackbar-action');
expect(buttonElement.tagName)
@@ -120,10 +119,9 @@ describe('MdSnackBar', () => {
expect(snackBarRef.instance.snackBarRef)
.toBe(snackBarRef, 'Expected the snack bar reference to be placed in the component instance');
- let messageElement = overlayContainerElement.querySelector('span.mat-simple-snackbar-message');
- expect(messageElement.tagName).toBe('SPAN', 'Expected snack bar message element to be ');
+ let messageElement = overlayContainerElement.querySelector('snack-bar-container');
expect(messageElement.textContent)
- .toBe(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
+ .toContain(simpleMessage, `Expected the snack bar message to be '${simpleMessage}''`);
expect(overlayContainerElement.querySelector('button.mat-simple-snackbar-action'))
.toBeNull('Expected the query selection for action label to be null');
});