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

user_2221525 0
Viewed 1539

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,
      });
    };
  });
angular-material angularjs firefox
3 Answers

Here is a workaround. Just move the scroll from the body element to an inner element like below:

    <body>
        <div id="container">
            ... Your content ...
        </div>
    </body>

    body{
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    #container{
        height: 100%;
        width: 100%;
        overflow-y: scroll;
    }
Admin1 
.md-dialog-container {
  top: 0px !important;
  height: 100% !important;
  position: fixed !important;
}
user_145261250
Related