Skip to content

Commit

Permalink
fix(tabs): server-side rendering error (#5348)
Browse files Browse the repository at this point in the history
* Fixes an error that was being thrown by the tab header when using server-side rendering.
* Fixes the `transform` potentially being set to an invalid value, if reading the scroll position fails (e.g. `translate3d(NaNpx, 0, 0)`).
  • Loading branch information
crisbeto authored and tinayuangao committed Jun 27, 2017
1 parent 1b351cd commit 0174377
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 20 deletions.
15 changes: 8 additions & 7 deletions src/lib/tabs/tab-header.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
AfterContentInit,
OnDestroy,
NgZone,
Renderer2,
} from '@angular/core';
import {
RIGHT_ARROW,
Expand Down Expand Up @@ -136,6 +137,7 @@ export class MdTabHeader implements AfterContentChecked, AfterContentInit, OnDes
constructor(
private _elementRef: ElementRef,
private _ngZone: NgZone,
private _renderer: Renderer2,
@Optional() private _dir: Directionality) { }

ngAfterContentChecked(): void {
Expand Down Expand Up @@ -299,12 +301,11 @@ export class MdTabHeader implements AfterContentChecked, AfterContentInit, OnDes

/** Performs the CSS transformation on the tab list that will cause the list to scroll. */
_updateTabScrollPosition() {
let translateX = this.scrollDistance + 'px';
if (this._getLayoutDirection() == 'ltr') {
translateX = '-' + translateX;
}
const scrollDistance = this.scrollDistance;
const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;

applyCssTransform(this._tabList.nativeElement, `translate3d(${translateX}, 0, 0)`);
this._renderer.setStyle(this._tabList.nativeElement, 'transform',
`translate3d(${translateX}px, 0, 0)`);
}

/** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
Expand All @@ -317,7 +318,7 @@ export class MdTabHeader implements AfterContentChecked, AfterContentInit, OnDes

this._checkScrollingControls();
}
get scrollDistance(): number { return this._scrollDistance; }
get scrollDistance(): number { return this._scrollDistance; }

/**
* Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
Expand Down Expand Up @@ -413,7 +414,7 @@ export class MdTabHeader implements AfterContentChecked, AfterContentInit, OnDes
_getMaxScrollDistance(): number {
const lengthOfTabList = this._tabList.nativeElement.scrollWidth;
const viewLength = this._tabListContainer.nativeElement.offsetWidth;
return lengthOfTabList - viewLength;
return (lengthOfTabList - viewLength) || 0;
}

/** Tells the ink-bar to align itself to the current label wrapper */
Expand Down
24 changes: 11 additions & 13 deletions src/universal-app/kitchen-sink/kitchen-sink.html
Original file line number Diff line number Diff line change
Expand Up @@ -183,19 +183,17 @@ <h2>Slider</h2>
<md-slider tickInterval="1" min="1" max="10" value="5" thumbLabel></md-slider>

<h2>Tabs</h2>

<!-- Tabs don't work because `_updateTabScrollPosition` tries to set the transform on start-up -->
<!--<md-tab-group>-->
<!--<md-tab label="Overview">-->
<!--The overview-->
<!--</md-tab>-->
<!--<md-tab>-->
<!--<ng-template md-tab-label>-->
<!--API docs-->
<!--</ng-template>-->
<!--The API docs-->
<!--</md-tab>-->
<!--</md-tab-group>-->
<md-tab-group>
<md-tab label="Overview">
The overview
</md-tab>
<md-tab>
<ng-template md-tab-label>
API docs
</ng-template>
The API docs
</md-tab>
</md-tab-group>

<nav md-tab-nav-bar>
<a md-tab-link href="https://google.com">Google</a>
Expand Down

0 comments on commit 0174377

Please sign in to comment.