Is it possible to position an $mdToast at the top of the page for narrow viewport?

Problem

I'd like to have a toast with site messages (like success or error notification on last action) displayed at the top of the page.

Angular material docs say you can position a toast at the top:

position - {string=}: Where to place the toast. Available: any combination of 'bottom', 'left', 'top', 'right'. Default: 'bottom left'.

Top position works fine for desktop browsers with width >= 960px but is ignored when width becomes less (then the toast is always at bottom) - why is that? And on mobile devices it's always at the bottom, too.

Problem courtesy of: Artem Vasiliev

Solution

So apparently that's not supported by Angular Material (as per v1.1.0.rc1) with screens having width less than 960px, but we can have a workaround like this:

<body ng-app="myApp">
  <div layout-fill>
    <md-toolbar ng-cloak>
      <div class="md-toolbar-tools">
        <md-button>My app</md-button>
      </div>
    </md-toolbar>
    <div id="toaster"></div>
    <md-content id="content" ng-cloak>
      ...
    </md-content>
  </div>
</body>

CSS:

#toaster {
  position: fixed;
  top: 56px;
  height: 48px;
  left: 0;
  width: 100%;
  z-index: 10000;
}

JS:

$mdToast.show($mdToast.simple()
  .textContent('hello!')
  .parent(document.querySelectorAll('#toaster'))
  .position('top left')
  .hideDelay(false)
  .action('x'));

Result: http://screencast.com/t/B1U8aXaFcd

This will also keep the toast at its position when the page is scrolled. But with this solution the animated hide will keep moving the message to the bottom, not top. In my real project I ended up not struggling against MD and having the toast at the bottom, but I use this approach to keep its position when scrolling the page.

Solution courtesy of: Artem Vasiliev

Discussion

According to the Google Material Design docs (my highlights):

Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.

If to take a look in the angular-material.css (as per v.1.0.5):

@media (max-width: 959px) {
  md-toast {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 0;
    bottom: 0; 
  }
  ...
}

You can't place a toast on screens with a width less that 960px out of the box (because of the bottom: 0 margin), because the team at angular-material just implemented the specs that do not define this possibility.

Try to extend/overwrite the css in order to achieve that.

Discussion courtesy of: iulian

Here is a CSS solution:

@media (max-width:959px) {
  md-toast {
    bottom: unset !important;
  }
}

Hope this helps.

Discussion courtesy of: Edmond Woychowsky

This recipe can be found in it's original form on Stack Over Flow.