MOBILE-2334 assign: Fix tab scrolling
parent
cf927d4344
commit
9d69c0f623
|
@ -22,7 +22,7 @@
|
|||
</ion-item>
|
||||
|
||||
<!-- Tabs: see the submission or grade it. -->
|
||||
<core-tabs [selectedIndex]="selectedTab" [hideUntil]="loaded">
|
||||
<core-tabs [selectedIndex]="selectedTab" [hideUntil]="loaded" parentScrollable="true">
|
||||
<!-- View the submission tab. -->
|
||||
<core-tab [title]="'addon.mod_assign.submission' | translate">
|
||||
<ng-template>
|
||||
|
|
|
@ -25,6 +25,17 @@ core-tabs {
|
|||
|
||||
.core-tabs-content-container {
|
||||
height: 100%;
|
||||
|
||||
&.no-scroll {
|
||||
height: auto;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.scroll-content {
|
||||
overflow: hidden !important;
|
||||
contain: initial;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabs-hidden {
|
||||
|
|
|
@ -44,6 +44,7 @@ import { Content } from 'ionic-angular';
|
|||
export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
|
||||
@Input() selectedIndex = 0; // Index of the tab to select.
|
||||
@Input() hideUntil = true; // Determine when should the contents be shown.
|
||||
@Input() parentScrollable = false; // Determine if the scroll should be in the parent content or the tab itself.
|
||||
@Output() ionChange: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>(); // Emitted when the tab changes.
|
||||
@ViewChild('originalTabs') originalTabsRef: ElementRef;
|
||||
@ViewChild('topTabs') topTabs: ElementRef;
|
||||
|
@ -58,7 +59,6 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
|
|||
protected tabBarHeight;
|
||||
protected tabBarElement: HTMLElement; // Host element.
|
||||
protected tabsShown = true;
|
||||
protected scroll: HTMLElement; // Parent scroll element (if core-tabs is inside a ion-content).
|
||||
|
||||
constructor(element: ElementRef, protected content: Content) {
|
||||
this.tabBarElement = element.nativeElement;
|
||||
|
@ -164,9 +164,14 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
|
|||
this.tabBarHeight = this.topTabsElement.offsetHeight;
|
||||
this.originalTabsContainer.style.paddingBottom = this.tabBarHeight + 'px';
|
||||
if (this.content) {
|
||||
this.scroll = this.content.getScrollElement();
|
||||
if (this.scroll) {
|
||||
this.scroll.classList.add('no-scroll');
|
||||
if (!this.parentScrollable) {
|
||||
// Parent scroll element (if core-tabs is inside a ion-content).
|
||||
const scroll = this.content.getScrollElement();
|
||||
if (scroll) {
|
||||
scroll.classList.add('no-scroll');
|
||||
}
|
||||
} else {
|
||||
this.originalTabsContainer.classList.add('no-scroll');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue