Angular 5 Tabs scroll to top of the page

Question

I'am working with the Angular 5 Tabs and the problem is when I switch from one tab to another the page will scroll to the top of the page. Is there anyone that knows how I can possibly fix this.

<div class="row">
  <div class="col-md-12">
    <mat-tab-group dynamicHeight="true">
      <ng-container *ngFor="let rubric of assessmentForm.rubrics">
        <mat-tab label="{{rubric.title}}">
          <div class="table-responsive">
            <table class="table table-bordered wrappedTable">
              <thead>
              <tr>
               <td></td>
              </tr>
              </tfoot>
            </table>
          </div> <!-- /table-responsive -->
        </mat-tab>
      </ng-container>
    </mat-tab-group>
  </div>
</div> <!-- /row -->

I left out some code that is inside the table and probably won't affect the issue.

Answer 1

The reason is when you change the tab, the next tab does not have that much height of its inner contents so the parent height also decrease, that's why its scroll to top It can be fixed by adding min-height, for example:

<div class="col-md-12" style="min-height:800px;">
  <mat-tab-group dynamicHeight="true">
   ....content
  </mat-tab-group>
</div>