Material: mdToast position center

[jgoux]

Hi,
is it possible to add a position "center" to mdToast ?
This position (bottom center) is often used on Android : http://www.technobuzz.net/wp-content/uploads/2014/07/Enable-USB-Debugging.jpg

[ilanbiala]

Does bottom left right not work?

[jgoux]

@ilanbiala With these options, it takes 100% width, which is not what I want.
In addition, on large screens the options bottom left right isn't centered.

[timothymiko]

I would like to see this happen. On large screens, a toast on the left or right looks quite out of place in some cases.

[gustavohenke]

:+1: for this as well. Same issue as @timothymiko.

[timothymiko]

I believe adding the code below in src/components/toast/toast.scss at line 113 would do the trick.

&.md-center {
  margin-left: auto;
  margin-right: auto;
  left: 0; right: 0;
}

[colinskow]

+1: Per official Material specs the Toast should be full-screen width on phones, and centered on tablets and desktops.

[anton-rusanov]

timothymiko, your solution can work for some, but it stretches the toast to its max-width even if it contains just a short piece of text, which is usually undesirable.

[webservconsultant]

Is this feature completed? http://stackoverflow.com/questions/33413915/how-to-customize-mdtoast

[anupbelambe]

+1. Do we have any recommended workaround till this is resolved?

[carpaij]

+1: To follow the official specs and it simply looks better on large screens

[pdore-netfore]

+1

[deepikat]

&.md-center {
  margin-left: auto;
  margin-right: auto;
  left: 0; right: 0;
}

In addition, include the width property to have a specific size toast

&.md-center {
  margin-left: auto;
  margin-right: auto;
  left: 0; right: 0;
  width: 60%;
}

[docwhite]

+1 all the solutions you propose means overwriting the angular material code, right? I am using bower in my project, so it is not the best thing to do :(

[vapits]

That would be a great update on mdToast.
Material Design is awesome but there are a lot of cases that simple the four corners are not good choice.

Usually:
Top Left: Logo / Menu
Top Right: Logout or options or FAB
Bottom Right: FAB or Help or Chat
Bottom Left: Usually not noticeable (usually there is a toolbar there...

So I agree that would be a great addition Top/Bottom Center position.

[rolandmaio]

+1 @vapits is absolutely correct. Material Design is fantastic, but for a toast none of the four corners may be suitable in cases where the users attention is directed elsewhere. So either the toast tears their attention away or they may miss it entirely.

[thorvx]

+1 center Toast is best way

[DanielCaspers]

+1 Centering an mdToast will be incredibly useful. Otherwise people might result to writing their own custom CSS to do this common task or perhaps use automatically time dismissed dialogs instead to accomplish their goal.

[webservconsultant]

+1 for center Toast. Centering toast is very useful when screen has left and right sidenavs

[colinskow]

This is a very simple fix. I made a very simple pull request #8269. It looks like the team is so focused on Material2 nobody has had time to review it. Please +1 it if you want it merged.

[colinskow]

Meanwhile just add the following to your project css:

._md-center {
       left: 50%;
       transform: translate3d(-50%, 0, 0);
}

Now you can set the position to center and it works perfectly:

$mdToast.show(
      $mdToast.simple()
        .textContent('Simple Toast!')
        .position('bottom center')
        .hideDelay(3000)
    );

[alexwohlbruck]

+1

[loginov-rocks]

@colinskow did you mean:

.md-bottom.md-center {
       left: 50%;
       transform: translate3d(-50%, 0, 0);
}

[marchrius]

@1oginov is ok with underscore prefix. The rendered classes in md-toast are _md-[top|rigth|bottom|left]

I suggest to add also the md-[top|bottom] in the css query selector so, my final css

._md-top._md-center,
._md-bottom._md-center {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

[markmssd]

With the latest release (1.0.0 stable), this is how it's done:

md-toast.md-center {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

and

$mdToast.simple()
      .textContent(message)
      .position('top center')  // or 'bottom center
      .show();

[ghost]

Using the code below the toast will be centered on desktop and take full width on mobile :)

@media (min-width: 960px) {
    md-toast.md-center {
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        padding: 0px;
    }
}

$mdToast.simple()
    .textContent('Example toast')
    .hideDelay(2400)
    .position('bottom center');