2

You may know, that there is a bug in bootstrap modals on some devices, that the page behind the modals scrolls instead of the modal (http://getbootstrap.com/getting-started/#support-fixed-position-keyboards)

This bug can be easily fixed by adding a css-rule .modal-open { position: fixed; }.

But this fix produces another bug - when you open a modal the page scrolls to the top. It can be resolved via JS, for example this way: https://stackoverflow.com/a/34754029/2244262

BUT I use angular-bootstrap package, which replaces bootstrap jquery events with promises. Because of this I don't know how to define global handlers for all modals on show/hide events. I have too many modals in my code and I don't want to define these handlers in each modal call, that's too dirty.

Any ideas on how to fix scroll to the top problem in my situation?

Community
  • 1
  • 1
Stalinko
  • 3,319
  • 28
  • 31
  • Decided to get rid of tall modals by giving all modal bodies a style `max-height: calc(100vh - 300px);` with auto overflow. This way all tall modals have scrollable body – Stalinko Feb 02 '17 at 05:21

1 Answers1

0

Maybe you can do it that way. The close function works when modal is closed. This prevents the page from scrolling up when the modal closes.

ngOnInit(): void {
 document.body.style.position = 'initial';
 document.body.style.top = `-${window.scrollY}px`;
 ...
}

close(result?: any): void {
 this.activeModal.close(result || {});

 const scrollY = document.body.style.top;
 document.body.style.position = '';
 document.body.style.top = '';
 window.scrollTo(0, parseInt(scrollY || '0') * -1);
}
Kübra Atlı
  • 29
  • 2