Angular Material Dialog: position always bottom right of windows

Question

I am trying to use angular material dialog (to be used as a panel for some purposes) on web pages positioned always to the bottom right of the window.

I have implemented something like the following

    $mdDialog.show({
      controller: function($scope, $mdDialog){
        // do something with dialog scope
      },
      template: '<md-dialog aria-label="My Dialog" style="position: absolute; bottom: 0; right: 0;">'+
                    '<md-dialog-content class="sticky-container">Blah Blah' +
                    '</md-dialog-content>' +
                    '<md-button ng-click=close()>Close</md-button>' +
                    '</md-dialog>',
      targetEvent: elementWrapper,
      hasBackdrop: false
    });
  };

https://plnkr.co/edit/lpFH2L?p=preview

There are two issues:

1- I am not able to scroll normally on the page. The scroll is locked. 2- Even if the scroll is enabled, with setting the position to absolute, when scroll down, the dialog wont stay at the bottom (it will remain on its previous position without going down as scroll).

What is the best way to achieve such a dialog panel using material to create something like google hangout chat panel (which behaves exactly as I want)?

camden_kid camden_kid · Accepted Answer · 2016-09-21T08:23:18

I wonder if using $mdToast might not be a better solution - CodePen

One thing to note though is that you say "bottom right" in your question but your demo shows the dialog in the top right.

Markup

<div ng-controller="AppCtrl" class="inset toastdemoCustomUsage" ng-cloak="" layout-padding ng-app="MyApp">
  <md-button ng-click="showCustomToast()" class="md-raised" style="padding-left: 10px;padding-right: 10px;">
    Open
  </md-button>

  <script type="text/ng-template" id="toast-template.html"><md-toast>
  <span class="md-toast-text" flex>Blah blah</span>
  <md-button ng-click="closeToast()">
    Close
  </md-button>
</md-toast>
</script></div>

JS

(function() {

  var isDlgOpen;

  angular
    .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('AppCtrl', function($scope, $mdToast) {
      $scope.showCustomToast = function() {
        $mdToast.show({
          hideDelay   : 0,
          position    : 'top right',
          controller  : 'ToastCtrl',
          templateUrl : 'toast-template.html'
        });
      };
    })
    .controller('ToastCtrl', function($scope, $mdToast, $mdDialog) {

      $scope.closeToast = function() {
        if (isDlgOpen) return;

        $mdToast
          .hide()
          .then(function() {
            isDlgOpen = false;
          });
      };
    });

})();

Info:

https://material.angularjs.org/latest/demo/toast https://material.angularjs.org/latest/api/service/$mdToast

Angular Material Dialog: position always bottom right of windows

1 Answers