Components: md-ink-bar not visible using <nav md-tab-nav-bar>

[artjomzab]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

md-ink-bar should be visible

What is the current behavior?

md-ink-bar is not visible. The .mat-ink-bar class is not changed when clicking the tabs:

.mat-ink-bar {
    position: absolute;
    bottom: 0;
    height: 2px;
    transition: .5s cubic-bezier(.35,0,.25,1);
}

What are the steps to reproduce?

http://plnkr.co/edit/qXJdsDIr5pwXxCdbRyLL

The plunker includes a simple example, however I could not get the router to work correctly, because I am not familiar with plunker.

What is the use-case or motivation for changing an existing behavior?

<nav md-tab-nav-bar> should yield the same presentation as <md-tab-group>

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

Tested on angular 2.3 and 2.4, material2 2.0.0-beta.2, Chrome v56

Is there anything else we should know?

nope

[andrewseguin]

I'm seeing an issue where the ink bar does not show up with the correct width but it does show up. Will begin working on the issue I see, but I cannot reproduce your case.

Can you fork my plunker and try to reproduce with it? Note that you do not need to use the router, just manipulate the active input manually.

http://plnkr.co/edit/AGSBYVx4ucPVmXOd7abT?p=preview

[chazeah]

I'm seeing an issue where the ink bar does not show up with the correct width but it does show up.

Ran into this as well. Did this ugly work around to re-position it after launching (irrelevant bits commented out):

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
...
import { MdTabNavBar } from '@angular/material';

...

export class MyComponent implements OnInit, AfterViewInit {
    ...
    @ViewChild(MdTabNavBar) private tabs: MdTabNavBar;

    ...

    ngAfterViewInit() {
        // mdInkBar has a nasty bug which makes it misaligned on load
        // https://github.com/angular/material2/issues/3133
        setTimeout(() => {
            this.tabs._activeLinkChanged = true;
            this.tabs.ngAfterContentChecked();
        }, 10);
    }
}

Hopefully that helps someone else running into this!

[jelbourn]

We haven't been able to reproduce this issue; feel free to re-open with a reproduction.

[gimox]

+1 same problem

md-selected-nav-item select the item but md-ink-bar has not size

[przemekpadrak]

<tabset >
    <tab>
      <span *tabHeading >First Tab</span>
        <md-tab-group>
            <md-tab>
            </md-tab>
        </md-tab-group>  
    </tab>
    <tab>
      <span *tabHeading>Second Tab</span>
        <md-tab-group>
            <md-tab>
            </md-tab>
        </md-tab-group>    
    </tab>
</tabset>

when you use bootstrap tabs and inside every tab place md-tab-group, a mat-ink-bar show only in first tab :/

[sonalishirodkar]

HOW TO DO RESPONSIVE md-nav-bar?IM NOT ABLE TO SEE FULL md-nav-item IN MOBILE

[willshowell]

@sonalishirodkar https://github.com/angular/material2/issues/2177

[Pikachews]

Oddly, this seems to happen to me if the links were hard-coded into the template. This example doesn't have the ink bar, and the tab buttons have a small gap between them.

    <nav md-tab-nav-bar>
        <a md-tab-link routerLink="./foo" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">Foo</a>
        <a md-tab-link routerLink="./bar" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">Bar</a>
    </nav>

But if you generate the links with an NgFor, the ink bar shows up, and the gap between the buttons disappear:
component.ts:

    <nav md-tab-nav-bar>
        <a md-tab-link
        *ngFor="let link of navLinks"
        [routerLink]="link"
        routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
            {{link}}
        </a>
    </nav>

If you add a hard-coded tab to the end of the 2nd example, that tab is disconnected (the small gap), but the ink bar will work properly.

I'd create a plnkr, but it never seems to work for me.

[willshowell]

@Pikachews The reason this doesn't work for you (and using *ngFor does) is because of your redefining of #rla which has a template-wide scope. The following should work

<nav md-tab-nav-bar>
  <a md-tab-link routerLink="./foo" routerLinkActive #rlaFoo="routerLinkActive" [active]="rlaFoo.isActive">Foo</a>
  <a md-tab-link routerLink="./bar" routerLinkActive #rlaBar="routerLinkActive" [active]="rlaBar.isActive">Bar</a>
</nav>

[sasmithas]

@Pikachews The reason this doesn't work for you (and using *ngFor does) is because of your redefining of #rla which has a template-wide scope. The following should work

<nav md-tab-nav-bar>
  <a md-tab-link routerLink="./foo" routerLinkActive #rlaFoo="routerLinkActive" [active]="rlaFoo.isActive">Foo</a>
  <a md-tab-link routerLink="./bar" routerLinkActive #rlaBar="routerLinkActive" [active]="rlaBar.isActive">Bar</a>
</nav>

This worked for me ! :)

[angular-automatic-lock-bot[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._}