fix(tabs): fix ink not showing on chrome 57

[andrewseguin]

The ink bar was positioned absolutely in a display flex element, which no longer plays nice in Chome (beta, v 57). Moved the ink bar out of the display flex element. Also fixed issue for the nav bar, which did not always show the ink bar on first render.

[mmalerba]

Is there a reason we can't do this in the updateActiveLink method?

[andrewseguin]

The initial set for active is performed while the component is setting up and before the content is ready, so the ink bar doesn't know what to align to. Subsequent calls would be fine but we're seeing an issue with the first load of the component.

[kara]

LGTM

[rupamroy]

I am using "@angular/material": "^2.0.0-beta.3", which is the latest npm pulled .

My html looks like this

<md-toolbar>
  <h1>My test application</h1>
  <nav md-tab-nav-bar>
    <a md-tab-link [routerLink]="['']" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">Home</a>
  </nav>
</md-toolbar>

And here is how the tab is being rendered

Can you please tell me what am I doing wrong or this is still an issue that team is working on?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}