[Tabs] Ink bar is not correctly aligned on init

[VitalyVrublevskyy]

Bug, feature request, or proposal:

Bug (Some different than #3044)

What is the expected behavior?

Highlighter [md-ink-bar] should invalidate position on init app

What is the current behavior?

Misaligned [md-ink-bar]. Please see attached image.

What are the steps to reproduce?

Case 1

1. Open demo application from material2
2. Navigate to tabs (Especially for Tab Nav Bar with routing example)
3. Apply md-stretch-tabs directive for and apply styles for tab items
   [md-stretch-tabs] [md-tab-link] { flex-basis: 0; flex-grow: 1; }
4. Try to expand / collapse application sidebar.

Case 2 (or just apply attached git patch. )

1. Open demo application from material2
2. Setup <md-sidenav mode="side" opened="true"> for root app container.
3. Navigate to tabs (Especially for Tab Nav Bar with routing example)
4. Apply md-stretch-tabs directive for and apply styles for tab items
   [md-stretch-tabs] [md-tab-link] { flex-basis: 0; flex-grow: 1; }
5. Select not first tab
6. Refresh page

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Patch: MD_TabBar_issue.patch.zip

Which versions of Angular, Material, OS, browsers are affected?

Based on up to date sources of material2

Is there anything else we should know?

[jarekskuder]

Same here on iOS 10.3.2 cordova app

[levz0r]

Hi,
Any plans to fix this?

[Anderman]

Is there a workarond for this?

[Anderman]

I have this workarond

  @ViewChild(MatTabNav) public matTabNav: MatTabNav;
  public ngAfterViewChecked(): void {
    setTimeout(() => this.matTabNav._alignInkBar(), 0);
  }

[bentaly]

This has changed to _alignInkBarToSelectedTab in Angular 8

[dhair-seva]

This is happening to me, because my sidebar for the entire app has a width change on route change, so if I have a mat-tab-group in any page, I would have to implement this, which means, I would have to do this in over 10+ pages. This workaround is not a good fix for my use-case. Is there another fix, globally?

[omaracrystal]

I also have ran into this issue. The mat-ink-bar does not recalculate when there is a material side nav with the mode set to "side". Here is my work around with css (I am hiding the mat-ink-bar and using &:after styling):

• (add this to your global styles so it takes effect throughout your app)

.mat-tab-label-active {
    .mat-tab-label-content {
      font-weight: bold;
      color: black;

      &:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background: $blue-3;
        right: 0;
        bottom: 0;
      }
   }
}

mat-ink-bar {
  display: none !important;
}