How to reset modal scroll time modal's content is updated?

user_15082006 0
Viewed 214

I'm using ng-bootstrap for the modal of my app.

My modal has multiple pages with the Next and Back buttons.

When the page is long and has to be scrolled, it loads in the center of the modal and not at the top.

It should load always like this:

enter image description here

But it loads like this:

enter image description here

In the first image is the top part of my modal with the title "Modal title" which should be always loaded every time I open the modal or switch to other pages.

But the current behavior is like the second image, which loads the modal in the middle of it and not showing the title "Modal title".

How can I ensure that it always reset the view of my modal to the uppermost part of my modal?

My modal component only has modal.component.ts, modal.component.html and modal.component.css since it is not using a router to load the pages but rather, a function calls and load the pages.

ng-bootstrap angular
2 Answers

You can set the scroll position by setting the scrollTop of the scrollable element to 0.

<div #scrollableContainer>
  <h1>Mos approves!</h1>
</div>

<button (click)="goBack(); scrollableContainer.scrollTop = 0">Back</button>
<button (click)="goFuther(); scrollableContainer.scrollTop = 0">Next</button>
user_3901610

If anyone is still looking for the answer, what I did to resolve this is to have an id on the header of my html file like this:

<div class="modal-header" id="modalHeader">
   <h3> Modal title </h3>

Then I added this following line of code to every function that needs to scroll to the top page:

document.getElementById("modalHeader").scrollIntoView();
user_150820060
Related