From fa81717ccf4c6ec73b241faf8f31081bdb9aaf30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 4 Mar 2022 13:28:20 +0100
Subject: [PATCH] MOBILE-3814 course: Section navigation buttons stuck at the
 bottom

---
 .../course-format/course-format.html          | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/core/features/course/components/course-format/course-format.html b/src/core/features/course/components/course-format/course-format.html
index 7232b31bf..a8ca2b304 100644
--- a/src/core/features/course/components/course-format/course-format.html
+++ b/src/core/features/course/components/course-format/course-format.html
@@ -24,21 +24,21 @@
 
             <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
         </div>
-
-        <div class="ion-padding core-course-section-nav-buttons safe-area-padding-horizontal list-item-limited-width"
-            *ngIf="displayCourseIndex && (previousSection || nextSection)">
-            <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" expand="block"
-                [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
-                <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true"></ion-icon>
-                <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id">
-                </core-format-text>
-            </ion-button>
-            <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" expand="block"
-                [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
-                <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id">
-                </core-format-text>
-                <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true"></ion-icon>
-            </ion-button>
+        <div collapsible-footer *ngIf="displayCourseIndex && (previousSection || nextSection)" slot="fixed">
+            <div class="core-course-section-nav-buttons safe-area-padding-horizontal list-item-limited-width">
+                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" expand="block"
+                    [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
+                    <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true"></ion-icon>
+                    <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id">
+                    </core-format-text>
+                </ion-button>
+                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" expand="block"
+                    [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
+                    <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id">
+                    </core-format-text>
+                    <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true"></ion-icon>
+                </ion-button>
+            </div>
         </div>
     </core-loading>
 </core-dynamic-component>