CODEWITHSUNDEEP
angularangular-material
Alex Po
Alex Po

Reputation: 2035

mat-tab-group scrolls to top of page when tab index changes

I have weird behaviour on mat-tab-group in Angular Material.

When I change tab index it scrolls the page to top.

Any idea why?

Upvotes: 14

Views: 10039

Answers (3)

Davos CODER
Davos CODER

Reputation: 61

The predefined minimum height will not work for dynamic heights (tabs where the size of the content changes), so the most responsive solution is to modify it when changing tabs so that the new tab stays with the minimum height of the previous one to avoid scroll up

//HTML

<mat-tab-group #matTabGroup (selectedTabChange)="onMatTabChanged();">

//TS

@ViewChild('matTabGroup', { static: true }) matTabGroup: MatTabGroup;

onMatTabChanged() {
  this.setMatTabGroup();
}

setMatTabGroup() {
  let ntvEl = this.matTabGroup._elementRef.nativeElement;
  ntvEl.style.minHeight = ntvEl.clientHeight + 'px';
}

Upvotes: 6

DJAFER Belqassim
DJAFER Belqassim

Reputation: 111

You can avoid this by adding a min-height to your mat-tab-group.

Exemple :

<mat-tab-group style='min-height:300px'>

Upvotes: 11

bugs
bugs

Reputation: 15313

It is a known bug in the angular material library (see here) which has not been fixed yet.

The current workaround is to apply a min-height to the parent element of mat-tab-group

Upvotes: 28

Related Questions