mat-tab-header-pagination displaying incorrectly

[Anderman]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

Steps to reproduce:
1.
2.

Expected Behavior

mat-tab-header-pagination should only be displayed when the tabs cannot fit inside the container.

Actual Behavior

A small rounding problem in chrome?

Environment

• Angular:8.2.8
• CDK/Material:8.2.1
• Browser(s):chrome
• Operating System (e.g. Windows, macOS, Ubuntu): windows10

[Anderman]

I found a workaround to fix the bug

export class ToolbarComponent implements OnInit {
  constructor(public auth: AuthService, private router: Router) { }
  @ViewChild(MatTabNav, { static: true }) public matTabNav: MatTabNav;
  public ngOnInit() {
    this.matTabNav._checkPaginationEnabled = _checkPaginationEnabled;
  }
}

function _checkPaginationEnabled() {
  {
    const isEnabled = this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth + 1;
    if (!isEnabled) {
      this.scrollDistance = 0;
    }
    if (isEnabled !== this._showPaginationControls) {
      this._changeDetectorRef.markForCheck();
    }
    this._showPaginationControls = isEnabled;
  }
}

[Anderman]

related to #8907

[Anderman]

@andrewseguin Another cause of wrong pagination is the inkt-bar. If the inkt-bar is outside the navigationbar the scrollwidth of the tablist give the wrong information.
this should be this._tabList.nativeElement.firstChild.scrollWidth

To fix this I update the patched function to:

function _checkPaginationEnabled() {
this._elementRef.nativeElement.offsetWidth, 'isEnabled', this._showPaginationControls);
  const isEnabled = this._tabList.nativeElement.firstChild.scrollWidth > this._elementRef.nativeElement.offsetWidth + 1;
  if (!isEnabled) { this.scrollDistance = 0; }
  if (isEnabled !== this._showPaginationControls) { this._changeDetectorRef.markForCheck(); }
  this._showPaginationControls = isEnabled;
}

[jelbourn]

I wasn't able to reproduce this; feel free to open a new issue if you're able to provide a reproduction in StackBlitz

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