CODEWITHSUNDEEP
angular-materialangular-material-7
Roka
Roka

Reputation: 516

Angular Materials Mat Tab Group / Mat Tab width behavior

I implemented Angular Material mat tabs and mat tab group according to the Angular documentation, but I'm running into an issue when I hit tab two then back to tab one. The sizing, for a few moments gets large for the first tab and then goes back to normal:

On tab two and hit tab one On tab two and hit tab one

A few moments later after hitting tab one it goes back to normal A few moments later after hitting tab one

The code is straightforward:

<div *ngIf="auth.isLoggedIn()">
<mat-tab-group animationDuration="1000ms">
    <mat-tab label="Real Time Market Info"> 
        <app-stock-monitor></app-stock-monitor>
        <app-sectors></app-sectors>
        <app-news></app-news>
    </mat-tab>
    <mat-tab label="Market Predictor"> TBD </mat-tab>
</mat-tab-group>

Upvotes: 1

Views: 384

Answers (1)

Roka
Roka

Reputation: 516

The answer is to disable ripple (disableRipple)

<mat-tab-group animationDuration="1000ms" disableRipple>

Upvotes: 1

Related Questions