Menu
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.
862
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.
72
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.
45
Here is a CSS solution:
@media (max-width:959px) {
md-toast {
bottom: unset !important;
}
}
Hope this helps.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With