I've been creating a series of slides with questions, and the final slide serves as a summary of the previously answered questions. I want to ensure that the submit button is always visible at the bottom of this last slide. However, I've encountered some challenges in achieving this:
Using an ion-fab-button, but it doesn't remain fixed.
Applying CSS with "position: sticky !important;" to the button.
Wrapping everything except the button in an ion-card-content.
<ion-slide>
<ion-card>
<h1>Questions Overview</h1>
<ion-list *ngFor="let question of questions">
<ion-item>
<ion-label>
Question: {{ question.question }}
</ion-label>
</ion-item>
<ion-item>
<ion-label>
Your Answer: {{ question.answer }}
</ion-label>
</ion-item>
</ion-list>
<ion-button (click)="onSubmit()" expand="full">Submit</ion-button>
</ion-card>
</ion-slide>
As I'm still relatively new to the framework, I'm unsure if there are other potential solutions to explore. I have searched online, but most resources discuss buttons outside of ion-content, which doesn't align with my needs as all elements are within ion-content. Placing the button outside ion-content would result in it appearing on every slide, which is not the desired outcome.
Update:
TL;DR Workaround:
Add
@ViewChild('slides', {read: IonSlides}) slides: IonSlides;Utilize the event (ionSlideReachEnd)="onEnd()" on <ion-slides> in the .html file
onEnd() {
this.slides.isEnd().then(endReached => {
this.reachedEnd = endReached // reachedEnd is a variable to be checked in the HTML file
}
To address this issue, I have implemented a workaround. By using the above code, I am able to determine when I reach the end of the slides. Subsequently, I display an ion-footer containing the submit button. This footer remains fixed at the bottom of the page rather than being tied to the slides, ensuring that users can always submit their answers regardless of the slide they are on.