Why Angular Material ngToast makes the page jump?

Question

I want to make my toast to appear in the position where the user is already positioned on the page (in the view that he is already seeing in the browser). But somehow, each time the toast appears the page is jumping to other position.

index.html

<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-app="MyApp">

  <div ng-repeat="n in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15, 16, 17, 18, 19, 20]">
    <p>{{$index}}</p>
  </div>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-button ng-click="showToast()">
        Show Toast
      </md-button>
    </div>
</div>

app.js

angular.module('MyApp')
.controller('AppCtrl', function($scope, $mdToast) {
  $scope.showToast = function() {
    $mdToast.show($mdToast.simple().position('top right').textContent('Hello!'));
  };
})

Please see the following link with a demo (scroll down and click on the 'Show Toast' button: ngToast Example

I want the toast to appear in the top of the current view and not to jump to the top of the page each time it will appear.

By the way, if I will change the toast position to 'bottom right' - the toast appears on the bottom right of the fist view and not on the bottom-right of the section that the user is viewing.

How I can fix this?

Thanks.

camden_kid · Answer 1 · 2016-08-12T16:25:53.750

1

With regards to your comment below here is an example of containing the toast (in a card) - CodePen

If you give your card(s) an id you can set the toast parent to the element with that id:

JS

$scope.showCustomToast = function() {
    $mdToast.show({
      hideDelay   : 3000,
      position    : 'top right',
      controller  : 'ToastCtrl',
      templateUrl : 'toast-template.html',
      parent: $element[0].querySelector('#blah')
    });
};

Markup

<div id="blah" style="width:400px; height:400px; background:yellow">Toast parent</div>

edited Aug 12 '16 at 16:25

answered Aug 12 '16 at 14:33

camden_kid

12,591
11
52
88

Thanks camden_kid, but this won't help me. Because I don't want to always show the button. On my app I have several cards with buttons (something like Facebook) when someone click on a button on these cards I don't want the toast to make the page jump. – iseif Aug 12 '16 at 14:48
@iseif Understood. It's an interesting problem. There must be a way of doing it because the demo page does it - https://material.angularjs.org/latest/demo/toast. The toast is contained within its card and does not appear in the top right of the page. The toast docs hint at a way of doing it - https://material.angularjs.org/latest/api/service/$mdToast - but I can't figure it out. – camden_kid Aug 12 '16 at 15:19
I tried as well to implement it how they did it but with no success. BTW, if you change the '.position('top right')' to '.position('bottom right')' - you will get a wired issue, the toast will appear in the bottom of the first 'view' of the page. – iseif Aug 12 '16 at 15:22
@iseif I've updated the answer. Hope it helps. If not, let me know. :-) – camden_kid Aug 12 '16 at 16:26
thanks for the try, but if the div of the Toast Parent is scrolled down, then it will jump to the top as well. – iseif Aug 13 '16 at 05:56

score 1 · Accepted Answer · answered Aug 13 '16 at 06:02

I asked the guys from the Angular Material GitHub and here is the answer they provided:

This is a known issue that we hope to solve with a rewrite of the toast (and some other popup components).

In the meantime, here is an easy workaround: Codepen Example

Basically, you create a container (#toast-container in the Codepen) that is only as big as the viewport, and make it the parent of the toast.

HTML

<div id="toast-container"></div>
<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-app="MyApp">

  <div ng-repeat="n in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15, 16, 17, 18, 19, 20]">
    <p>{{$index}}</p>
  </div>

    <div layout="row" layout-sm="column" layout-align="space-around">
      <md-button ng-click="showToast()">
        Show Toast
      </md-button>
    </div>
</div>

CSS

#toast-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 0, 0, 0.2);
}

JS

angular.module('MyApp')
.controller('AppCtrl', function($scope, $mdToast) {
  $scope.showToast = function() {
    $mdToast.show($mdToast.simple().position('bottom right').textContent('Hello!').hideDelay(10000).parent(document.getElementById('toast-container')));
  };
})

Here is the issue I opened there: Angular Material Issue

Thanks.

Why Angular Material ngToast makes the page jump?

2 Answers2