CODEWITHSUNDEEP
angularangular-materialmat-tab
prady
prady

Reputation: 426

mat-tab-group spacing change on clicking tabs

I am using material with angular4 When is use below code. it shows tabs properly but when i switch tabs clicking on any tab the spaces between tabs change it becomes wide narrow as if some flex style space-between space-around etc is applied. i have added no additional styling. I am using this below component inside a <mat-sidenav-content> if that does make any difference.

<mat-tab-group [@.disabled]="true">
  <mat-tab label="Overview">
    <div>{{routeData.overview}}</div>
  </mat-tab>
  <mat-tab label="API">
    <div>{{routeData.api}}</div>
  </mat-tab>
  <mat-tab label="Examples">
    <div>{{routeData.examples}}</div>
  </mat-tab>
</mat-tab-group>

Upvotes: 2

Views: 2913

Answers (1)

prady
prady

Reputation: 426

I solved it myself.

What I missed was, I didn't use any material theme.

So i just added an import statement of material theme in my styles.css as mentioned below and it worked.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Upvotes: 6

Related Questions