diff --git a/src/components/app/structure.scss b/src/components/app/structure.scss index f6c08baf392..e722560c47c 100644 --- a/src/components/app/structure.scss +++ b/src/components/app/structure.scss @@ -125,11 +125,6 @@ ion-page.show-page scroll-content { display: block; } -ion-page.tab-subpage { - position: fixed; - z-index: 10; -} - // Toolbar Container Structure // -------------------------------------------------- diff --git a/src/components/content/content.ts b/src/components/content/content.ts index 0c7d549233d..037a4ba4760 100644 --- a/src/components/content/content.ts +++ b/src/components/content/content.ts @@ -420,6 +420,7 @@ export class Content extends Ion { this._paddingBottom = 0; this._headerHeight = 0; this._footerHeight = 0; + this._tabbarOnTop = null; let ele: HTMLElement = this._elementRef.nativeElement; let parentEle: HTMLElement = ele.parentElement; diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts index f62335497b5..e75652a22b2 100644 --- a/src/components/tabs/tab.ts +++ b/src/components/tabs/tab.ts @@ -247,12 +247,12 @@ export class Tab extends NavController { load(opts: NavOptions, done?: Function) { if (!this._loaded && this.root) { this.push(this.root, this.rootParams, opts).then(() => { - done(); + done(true); }); this._loaded = true; } else { - done(); + done(false); } } diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index ea9a839e876..4106d28cd19 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -2,8 +2,10 @@ import {Component, ElementRef, Optional, ViewChild, ViewContainerRef, EventEmitt import {App} from '../app/app'; import {Config} from '../../config/config'; +import {Content} from '../content/content'; import {Ion} from '../ion'; import {isBlank, isTrueProperty} from '../../util/util'; +import {nativeRaf} from '../../util/dom'; import {NavController} from '../nav/nav-controller'; import {Platform} from '../../platform/platform'; import {Tab} from './tab'; @@ -355,7 +357,7 @@ export class Tabs extends Ion { let selectedPage = selectedTab.getActive(); selectedPage && selectedPage.fireWillEnter(); - selectedTab.load(opts, () => { + selectedTab.load(opts, (initialLoad: boolean) => { selectedTab.ionSelect.emit(selectedTab); this.ionChange.emit(selectedTab); @@ -388,6 +390,18 @@ export class Tabs extends Ion { this.selectHistory.push(selectedTab.id); } + // if this is not the Tab's initial load then we need + // to refresh the tabbar and content dimensions to be sure + // they're lined up correctly + if (!initialLoad && selectedPage) { + var content = selectedPage.getContent(); + if (content && content instanceof Content) { + nativeRaf(() => { + content.readDimensions(); + content.writeDimensions(); + }); + } + } }); } @@ -501,6 +515,7 @@ export class Tabs extends Ion { /** * @private + * DOM WRITE */ setTabbarPosition(top: number, bottom: number) { let tabbarEle = this._tabbar.nativeElement; diff --git a/src/components/tabs/test/advanced/tab2page2.html b/src/components/tabs/test/advanced/tab2page2.html index edc303cebb8..5f04698dece 100644 --- a/src/components/tabs/test/advanced/tab2page2.html +++ b/src/components/tabs/test/advanced/tab2page2.html @@ -9,7 +9,7 @@ -

+

diff --git a/src/components/tabs/test/advanced/tab2page3.html b/src/components/tabs/test/advanced/tab2page3.html index efb7481ecf5..32e79c18b52 100644 --- a/src/components/tabs/test/advanced/tab2page3.html +++ b/src/components/tabs/test/advanced/tab2page3.html @@ -1,13 +1,9 @@ - - - Tabs 2, Page 3 - - - + +

Tab 2, Page 3

- +

No Header.

diff --git a/src/components/tabs/test/advanced/tab3page1.html b/src/components/tabs/test/advanced/tab3page1.html index 9db1eae2973..5970d4700a4 100644 --- a/src/components/tabs/test/advanced/tab3page1.html +++ b/src/components/tabs/test/advanced/tab3page1.html @@ -1,14 +1,8 @@ - - - - Tabs 3, Page 1 - - - -

Tabs 3, Page 1

+

No header.

+