EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2333 tabs: Fix scroll issue with tabs in course contents

main
Dani Palou 2018-05-03 10:24:07 +02:00
parent 2db7656666
commit 6d142fbc7b
1 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/tabs/tabs.ts
View File

@ -107,9 +107,25 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
if (this.getIndex(tab) == -1) { if (this.getIndex(tab) == -1) {
this.tabs.push(tab); this.tabs.push(tab);
this.sortTabs(); this.sortTabs();
if (this.initialized && this.tabs.length > 1 && this.tabBarHeight == 0) {
// Calculate the tabBarHeight again now that there is more than 1 tab and the bar will be seen.
// Use timeout to wait for the view to be rendered. 0 ms should be enough, use 50 to be sure.
setTimeout(() => {
this.calculateTabBarHeight();
}, 50);
}
} }
} }
/**
* Calculate the tab bar height.
*/
calculateTabBarHeight(): void {
this.tabBarHeight = this.topTabsElement.offsetHeight;
this.originalTabsContainer.style.paddingBottom = this.tabBarHeight + 'px';
}
/** /**
* Get the index of tab. * Get the index of tab.
* *
@ -161,8 +177,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
} }
// Setup tab scrolling. // Setup tab scrolling.
this.tabBarHeight = this.topTabsElement.offsetHeight; this.calculateTabBarHeight();
this.originalTabsContainer.style.paddingBottom = this.tabBarHeight + 'px';
if (this.content) { if (this.content) {
if (!this.parentScrollable) { if (!this.parentScrollable) {
// Parent scroll element (if core-tabs is inside a ion-content). // Parent scroll element (if core-tabs is inside a ion-content).
@ -184,6 +199,11 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
* @param {any} e Scroll event. * @param {any} e Scroll event.
*/ */
showHideTabs(e: any): void { showHideTabs(e: any): void {
if (!this.tabBarHeight) {
// We don't have the tab bar height, this means the tab bar isn't shown.
return;
}
if (this.tabsShown && e.target.scrollTop - this.tabBarHeight > this.tabBarHeight) { if (this.tabsShown && e.target.scrollTop - this.tabBarHeight > this.tabBarHeight) {
this.tabBarElement.classList.add('tabs-hidden'); this.tabBarElement.classList.add('tabs-hidden');
this.tabsShown = false; this.tabsShown = false;