Ionic pwa toolkit - Fab button on top right edge of modal


I want to display the close button of the modal as a Fab on the top right edge. But only the bottom half is displayed.
Any idea how I can display the button properly?


I am facing a similar problem with rc-1

ion-fab on edge of modal is cut off.

tried adjusting z-index of all the ion elements and still the fab remains hidden

Wow i just got it

  1. display your modal with custom css like normal
const modal = await this.modalCtrl.create({
    component: CustomModalPage,
    cssClass: 'custom-modal'
await modal.present()
  1. create your custom css class for the modal


: root {

    .custom-modal .modal-wrapper {
        //modal positioning can be custom 
        //but needs the following
        background: transparent !important;        

  1. Finally remove the edge attribute from the fab, move the fab outside the <ion-content>, and adjust the ion-content styling:
ion-content {
    top: 44px; //ion-fab height

this achieved the following: