snack-bar multiline

[yentheo]

Bug, feature request, or proposal:

proposal

What is the expected behavior?

According to the material design spec, a snack-bar toast can have 2 lines of text. I want the snack-bar to grow in height to a minimum of 2 lines when it has 2 lines.

What is the current behavior?

The current behavior is that the text is pushed down under the bottom of the page

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.0.1
Material 2.0.0-alpha.10

Is there anything else we should know?

[jelbourn]

@josephperrott can you already do this with openFromComponent?

[josephperrott]

Multi-line snackbars are part of the spec on mobile only.

Unfortunately you would not be able to do this as we define the height explicitly for the snackbar container.

[yentheo]

@josephperrott It's a mobile web app I'm writing, if the screen is very narrow you can't put a lot of text on one line. I get that you shouldn't put too much text in a snackbar, but I also get the spec that mobile can have 2 lines.

I currently fixed it with an '!important', I know it's bad practice, but it is contained to only this case.
A solution could be to apply the mobile specs through a media query if the device has a screen width of a certain amount of pixels -> mobile?

[josephperrott]

Yep, overall that is the plan. I am currently working on the service that is needed for determining the breakpoints for when multiline should be used.

We are looking to use a service as this will be something that multiple components will need to do.

[yentheo]

@josephperrott Oh perfect. Love the work put in to Material2 btw!

[alexKnysh]

Hi, please make example for multi snack-bar, uses function openFromComponent.
I make test component :
`import { Component, OnInit } from '@angular/core';

@component({
selector: 'app-test-messages',
templateUrl: './test-messages.component.html',
styleUrls: ['./test-messages.component.css']
})
export class TestMessagesComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}I uses component: let config = new MdSnackBarConfig();
config.viewContainerRef = this.viewContainerRef;
let tests = this.snackBar.openFromComponent(TestMessagesComponent, config);`

I have error message:
Error in ./CardLogComponent class CardLogComponent - inline template:35:20 caused by: No component factory found for TestMessagesComponent

[cnoter]

@cyberat Add your snackbar component both to ngModule's declarations and entryComponents, it works

[donroyco]

The Material Components page is also showing this defect.

Is there a solution available for this problem? Unfortunately, I can't set the height due to the length of the text in multiple languages, so that answer is not solving the problem.