Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 1 material design scrolls to top after closing dialog in firefix

Hi when i open a dialog window using Angular material in firefox. The page scrolls to the top after the dialog is closed. Can anyone explain why this happens or have a workaround.

See https://codepen.io/WitteStier/full/EmzKQb/

HTML

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="App" ng-controller="AppCtrl">

    <div style="height:1500px;">Scroll down</div>

    <md-button ng-click="openDialog($event)">
      Open dialog
    </md-button>

    <div style="visibility: hidden">
      <div class="md-dialog-container" id="dialog-window">
        <md-dialog>
          <md-toolbar>
            <div class="md-toolbar-tools">
              <h2>Hi</h2>
            </div>
          </md-toolbar>
          <md-dialog-content>
            <div class="md-dialog-content">
              <p>Creativity is hard to define.</p>
            </div>
          </md-dialog-content>
        </md-dialog>
      </div>
    </div>

</body>
</html>

JS

angular.module('App', ['ngMaterial'])
  .controller('AppCtrl', function($scope, $mdDialog) {
    $scope.openDialog = function(ev) {
      $mdDialog.show({
        contentElement: '#dialog-window',
        parent: angular.element(document.body),
        targetEvent: ev,
      });
    };
  });
like image 820
WitteStier Avatar asked May 27 '17 23:05

WitteStier


1 Answers

Looks like it was fixed in this pull request: https://github.com/angular/material/pull/10549 Update your angular material version to 1.1.5 and it should work.

like image 86
Amrit Kahlon Avatar answered Oct 06 '22 06:10

Amrit Kahlon