From 9d69c0f623a6d5ef642da255baee8a892703a4b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 13 Apr 2018 12:33:17 +0200
Subject: [PATCH] MOBILE-2334 assign: Fix tab scrolling

---
 .../assign/components/submission/submission.html    |  2 +-
 src/components/tabs/tabs.scss                       | 11 +++++++++++
 src/components/tabs/tabs.ts                         | 13 +++++++++----
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/addon/mod/assign/components/submission/submission.html b/src/addon/mod/assign/components/submission/submission.html
index ab02ee679..33d75d8b6 100644
--- a/src/addon/mod/assign/components/submission/submission.html
+++ b/src/addon/mod/assign/components/submission/submission.html
@@ -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>
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 460e33760..09e3ec64a 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -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 {
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 9ce98db9a..5d57b056a 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -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');
             }
         }