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

Viewed 11483

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.

4 Answers

Try this:

HTML:

<body layout="column">
<!-- body ---> 
</body>

CSS:

body {
   overflow-y: hidden !important;
}
Related