treigh
October 21, 2021, 11:39pm
1
Hi guys, I’m curious if there’s an easy way to add ion-footer
to a modal component. In the following setup, the footer isn’t visible. It’s being pushed out of the view by ion-content
.
<Ion-modal>
<Ion-header>
<Ion-toolbar>
...
</Ion-toolbar>
</Ion-header>
<Ion-content>
...
</Ion-content>
<Ion-footer> // this is not visible
<Ion-toolbar>
...
</Ion-toolbar>
</Ion-footer>
</Ion-modal>
treigh
October 22, 2021, 1:54pm
2
In case anyone finds this useful, I settled for a workaround. Basically, inside the modal content, I have a footer element pinned to the bottom:
<template>
<footer class="form-footer">
<ion-toolbar>
// footer stuff
</ion-toolbar>
</footer>
</template>
<style lang="scss">
.form-footer {
position: fixed;
bottom: 0;
width: 100%;
min-height: 56px;
}
</style>
When using the Modal Controller you define a Component which the Modal will render
const modal = await this.modalController.create({
component: modalComponent
});
At that point the modalComponent is just a standard component. Just use a footer as expected
<ion-header>
<ion-toolbar>
<ion-title>Details</ion-title>
<ion-buttons slot="end">
<ion-button (click)="closeModal()">Close</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<p>Content Goes Here </p>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-button slot="end">Add New</ion-button>
</ion-toolbar>
</ion-footer>
1 Like
treigh
October 22, 2021, 10:25pm
4
That’s the stuff! Thanks for this. I got in the habit of using inline modals so much so that I’ve started mixing things up in the markup.
Thanks again!