Materialize: Toast in the center of screen

[ppeinsold]

Can I configure a toast so that it always appears in the center of the screen on desktop (and still at the bottom at mobile as it is)? It really looks pretty bad that it always appears on the top right corner of the screen because it does not fit into my design pattern...

thx

[liesislukas]

It should NOT appear in the center of the screen.

From the specs of material design:

Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.
Android also provides a toast, primarily used for system messaging. Toasts are similar to snackbars but do not contain actions and cannot be swiped off screen.

https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs

[ppeinsold]

On mobile it should appear at the bottom of the screen and it does out of the box.

But on desktop it simply makes no sense if I have for example a frame structure where some advertisement is on the right side and the toast appears as an overlay above the advertisement instead at where the action was triggered. I would say google gives us guidelines and not laws. It definitely would make sense to be able to configure the toast. In the meanwhile I just overwrite the css like this:

@media only screen and (min-width : 1261px) {
#toast-container {
min-width: 8%;
top: 50%;
right: 50%; } }

[liesislukas]

I agree, that Material design are guidelines not laws, but this css package calls itself "materlize css" and i believe, it should follow those guidelines like laws. Of course anyone can add some extra css, like you did, to modify anything.

On Desktop & tablets toasts should be on the bottom-middle position, with width 288-568 dp. This behavior I would expect from such lib as this.

[ppeinsold]

Thanks Lukas, I do agree that the toast should appear also on desktop & tablet at the bottom. I ended up in harmonize the toast so it looks equal on desktop, tablet and mobile (fullscreen, bottom). I think it would make sense to change the default behavior of the toast in desktop and tablet format like @liesislukas described it. Currently it appears in the top right corner of the screen. For anyone who likes to also change the default behavior of desktop and tablet toasts, that's what you have to overwrite in your css (play arround with the values):

@media only screen and (min-width : 601px) and (max-width : 1260px) {
.toast {
width: 100%;
border-radius: 0;} }

@media only screen and (min-width : 1261px) {
.toast {
width: 100%;
border-radius: 0; } }

@media only screen and (min-width : 601px) and (max-width : 1260px) {
#toast-container {
min-width: 100%;
bottom: 0%;
top: 90%;
right: 0%;
left: 0%;} }

@media only screen and (min-width : 1261px) {
#toast-container {
min-width: 100%;
bottom: 0%;
top: 90%;
right: 0%;
left: 0%; } }