fix(tabs): adjust the top of tabs each time the tab changes

Author: brandyscarney

src/components/content/content.ts

@@ -144,6 +144,8 @@ export class Content extends Ion implements OnDestroy, OnInit {
   /** @internal */
   _tabsPlacement: string;
   /** @internal */
+  _tTop: number;
+  /** @internal */
   _inputPolling: boolean = false;
   /** @internal */
   _scroll: ScrollView;
@@ -555,6 +557,7 @@ export class Content extends Ion implements OnDestroy, OnInit {
     let cacheHeaderHeight = this._hdrHeight;
     let cacheFooterHeight = this._ftrHeight;
     let cacheTabsPlacement = this._tabsPlacement;
+    let tabsTop = 0;
 
     this.scrollWidth = 0;
     this.scrollHeight = 0;
@@ -565,6 +568,7 @@ export class Content extends Ion implements OnDestroy, OnInit {
     this._hdrHeight = 0;
     this._ftrHeight = 0;
     this._tabsPlacement = null;
+    this._tTop = 0;
 
     let ele: HTMLElement = this._elementRef.nativeElement;
     if (!ele) {
@@ -624,6 +628,12 @@ export class Content extends Ion implements OnDestroy, OnInit {
       ele = ele.parentElement;
     }
 
+    // Tabs top
+    if (this._tabs && this._tabsPlacement === 'top') {
+      this._tTop = this._hdrHeight;
+      tabsTop = this._tabs._top;
+    }
+
     // Toolbar height
     this._cTop = this._hdrHeight;
     this._cBottom = this._ftrHeight;
@@ -650,6 +660,7 @@ export class Content extends Ion implements OnDestroy, OnInit {
       cacheHeaderHeight !== this._hdrHeight ||
       cacheFooterHeight !== this._ftrHeight ||
       cacheTabsPlacement !== this._tabsPlacement ||
+      tabsTop !== this._tTop ||
       this._cTop !== this.contentTop ||
       this._cBottom !== this.contentBottom
     );
@@ -668,7 +679,7 @@ export class Content extends Ion implements OnDestroy, OnInit {
    */
   writeDimensions() {
     if (!this._dirty) {
-      console.debug('Skipping writeDimenstions');
+      console.debug('Skipping writeDimensions');
       return;
     }
 
@@ -740,7 +751,7 @@ export class Content extends Ion implements OnDestroy, OnInit {
       // set the position of the tabbar
       if (this._tabsPlacement === 'top') {
         // ******** DOM WRITE ****************
-        this._tabs.setTabbarPosition(this._hdrHeight, -1);
+        this._tabs.setTabbarPosition(this._tTop, -1);
 
       } else {
         assert(this._tabsPlacement === 'bottom', 'tabsPlacement should be bottom');

src/components/tabs/test/top/app-module.ts

@@ -0,0 +1,143 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+//
+// Tab 1
+//
+@Component({
+  template: `
+    <ion-header>
+      <ion-navbar>
+        <ion-title>Speakers</ion-title>
+      </ion-navbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-list-header>
+          Tab 1
+        </ion-list-header>
+        <ion-item *ngFor="let i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
+      </ion-list>
+    </ion-content>
+    `
+})
+export class Tab1 {
+  items: any[] = [];
+
+  constructor() {
+    for (var i = 1; i <= 250; i++) {
+      this.items.push(i);
+    }
+  }
+}
+
+//
+// Tab 2
+//
+@Component({
+  template: `
+    <ion-header>
+      <ion-navbar>
+        <ion-title>Schedule</ion-title>
+      </ion-navbar>
+      <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item-sliding *ngFor="let session of sessions" #slidingItem>
+          <ion-item>
+            <h3>{{session.name}} {{session.name}} {{session.name}}</h3>
+            <p>{{session.location}} {{session.location}} {{session.location}}</p>
+          </ion-item>
+          <ion-item-options>
+            <button ion-button color="primary">Speaker<br>Info</button>
+            <button ion-button color="secondary">Add to<br>Favorites</button>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-list>
+    </ion-content>
+  `
+})
+export class Tab2 {
+  sessions: any[] = [];
+
+  constructor() {
+    for (var i = 1; i <= 250; i++) {
+      this.sessions.push({
+        name: 'Name ' + i,
+        location: 'Location: ' + i
+      });
+    }
+  }
+}
+
+//
+// Tab 3
+//
+@Component({
+  template: `
+    <ion-header>
+      <ion-navbar>
+        <ion-title>Map</ion-title>
+      </ion-navbar>
+    </ion-header>
+
+    <ion-content padding>
+      <h2>Tab 3</h2>
+    </ion-content>
+    `
+})
+export class Tab3 {
+  constructor() {}
+}
+
+
+@Component({
+  template: `
+    <ion-tabs>
+      <ion-tab tabTitle="Speakers" tabIcon="person" [root]="root1"></ion-tab>
+      <ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
+      <ion-tab tabTitle="Map" tabIcon="map" [root]="root3"></ion-tab>
+    </ion-tabs>
+  `
+})
+export class TabsPage {
+  root1 = Tab1;
+  root2 = Tab2;
+  root3 = Tab3;
+}
+
+@Component({
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+export class E2EApp {
+  root = TabsPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    Tab1,
+    Tab2,
+    Tab3,
+    TabsPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp, {
+      tabsPlacement: 'top'
+    })
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    Tab1,
+    Tab2,
+    Tab3,
+    TabsPage
+  ]
+})
+export class AppModule {}