John H John H - 8 days ago 7
AngularJS Question

Window scroll to start when open dialog at the end of page

I have a page with width is over 100% (2000px). When I click to show dialog from button in the end of page (by horizontal page), window scroll to the start of page (by horizontal page) and display the dialog.

enter image description here

This is my code: codepen

$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#popupContainer')))
.clickOutsideToClose(true)
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);
};


I use angularjs 1.5 and newest angular material js.

How can i show dialog from button in the end of page (by horizontal page) and window not scroll to the start of page?

Answer

You can add the following CSS.

.md-dialog-container {
  width: 2000px;
}

md-backdrop {
  width: 2000px;
}

md-dialog {
  position: absolute;
  top: 25%;
  right: 10%;
}

It adjusts dialog container's and backdrop's width.
Then, positioning the dialog the way you want.

See a working CodePen.

Comments