Components: md-tab-nav-bar wraps tabs instead of adding scroll controls

[1wiseash]

Bug, feature request, or proposal:

Bug?

What is the expected behavior?

When md-tab-nav-bar's tabs cannot fit on one line, it should be styled the same as tabs in md-tab-group: Add scroll left and right buttons.

What is the current behavior?

md-tab-nav-bar's tabs wrap to next line, which wouldn't be too big of a problem (if somewhat unexpected) if the ink bar stayed immediately under the menu option. However, the ink bar stays underneath the menu option, but at the bottom of the nav bar.

What are the steps to reproduce?

md-tab-group behavior:
`import { Component, OnInit } from '@angular/core';

@Component({
selector: 'tab-group-tester',
template: '
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7

',
styleUrls: ['./tab-group-tester.component.styl']
})
export class TabGroupTesterComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}
`

md-tab-nav-bar behavior (display on iPhone 5 portrait to see last tab fall to next line):
`import { Component, OnInit } from '@angular/core';

@Component({
selector: 'user-profile',
template: '

*ngFor="let link of navLinks"
[routerLink]="link.route"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}

',
styleUrls: ['./user-profile.component.styl']
})
export class UserProfileComponent implements OnInit {

navLinks = [
    {route: '/user/profile/basic-info', label: 'Basic Info'},
    {route: '/user/profile/photos', label: 'Photos'},
    {route: '/user/profile/interests', label: 'Interests'},
    {route: '/user/profile/questionnaires', label: 'Questionnaires'},
];

constructor() { }

ngOnInit() {
}

}
`

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

Make tab nav bar look the same as tab group, or at least have the ink bar fall immediately below tab label (like a bottom border) instead of at the bottom of the nav container.

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

Angular 4.2.4, Material 2.0.0-beta.10, Ubuntu, TS 2.3.3, Chrome (haven't checked others)

Is there anything else we should know?

Still super happy with this package. Great work!
Sorry about the formatting of my sample code. Still learning how Markdown works.

[andrewseguin]

Thanks for the issue - we're currently tracking the issue in #2177. It's something that gets requested quite often and I'd like to explore the possibility of putting the scrolling pagination into a common package to be used by both the tabs and nav bar.

[1wiseash]

This seems like a much easier fix because the navbar doesn't need to control the body, only itself. If this gets rolled into the larger "make them identical" issue, will it take longer to develop? If so, I might just make the mods myself.

[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._}