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

Ionic Framework
3

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

variable.scss

: 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:

Screenshot