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,
});
};
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With