scrollIntoView not working when device width is less than 1200px

Question

I am using Angular 5 and have a table where I create the table rows with an *ngFor and give them an id which is the username.

<tbody *ngFor="let User of FullTable; let i = index">
 <tr id='{{User.username}}'>
   <th scope="row" style="vertical-align: middle;">
    {{User.username}}
   </th>
 </tr>
</tbody>

I also have an input field where I listen to changes and want to search the User by his username and scroll to that table row.

<input class="form-control mr-sm-2" type="text" name="Search"
placeholder="Search" [(ngModel)]="Search" (input)="onSearchChange()">

The onSearchChange function looks like that

onSearchChange() {
  const scroll = document.getElementById(this.Search);
  scroll.scrollIntoView(false)
}

This works well when I'm in my browser, but when I go into responsive view and go under 1200px width it stops working. It still jumps a bit up/down when it finds a User but it doesn't scroll to the User.

Is there something I'm missing? Is this normal behavior? If it is how can I have scrolling to the element when I'm on smaller devices?

Answer 1

I've fixed the issue by scrolling by the offset not by the found element.

So first I find the element:

const scroll = document.getElementById(this.Search);

and then I calculate offsetTop:

const TopPos = scroll.offsetTop;

I then scroll with the given offset instead.