How to add ion-footer to a modal

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>

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

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!