Geek Answers Handbook

Can I place $ mdToast at the top of the page for a narrow viewport?

I would like to receive a toast with messages on the site (for example, with a success message or an error message in the last action) displayed at the top of the page.

Angular stuff docs say you can position the toast on top:

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

The top position works fine for desktop browsers with a width> = 960 pixels, but is ignored when the width gets smaller (then the toast is always down) - why? And on mobile devices, it is always below.

+8
angularjs material-design angular-material
source share
4 answers

Apparently this is not supported by Angular Material (according to v1.1.0.rc1) with screens less than 960px wide, 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

It will also keep the toast in position when the page scrolls. But with this solution, the animated seam will continue to move the message to the bottom, not the top. In my real project, I did not fight with MD and had a toast at the bottom, but I use this approach to maintain my position when scrolling through the page.

+7
source share

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

Snackbars provide easy operation feedback by displaying a short message at the bottom of the screen. Snacks may contain action.

If you look in angular-material.css (according to 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 cannot place toasts on screens with a width of less than 960px out of the box (because of the bottom: 0 field), because the team in angular-material just implemented specifications that do not define this feature.

Try expanding / rewriting css to achieve this.

+2
source share

Here is a CSS solution:

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

Hope this helps.

+1
source share

Try the following:

HTML:

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

CSS

 body { overflow-y: hidden !important; }
0
source share

More articles:


All Articles