1

I have created a component and added an ion fab inside it. When I open the component as a modal the ion fab is not shown. When I click once in the place it is supposed to be it shows but when I close the modal and open it again I can not see it.

I thought it was because I had a custom css class but even without it I still can not see the ion fab until i click on the place it is supposed to be.

The problem is only on iOS, on Android it works as expected.

Here is my code: Opening modal function:

 async addCollection(item) {
    item.isAdded = !item.isAdded;

    let modal = await this.modalCtrl.create(
      {
        component: AddCollectionComponent,
        cssClass: 'add-collection-custom-modal-css',
        backdropDismiss: true 
      }
    );

    await modal.present();
    let data = await modal.onDidDismiss();
  }

css class:

.add-collection-custom-modal-css .modal-wrapper {
    height: 70vh;
    bottom: 0;
    position: absolute;
    display: block;
    width: 100%;
    border-radius: 12px;
}

AddCollection component

<ion-content>

  <ion-row>
    <ion-searchbar placeholder="Search collections"></ion-searchbar>
  </ion-row>

  <ion-row style="margin: 15px;">
    <ion-col class="add-collection-header">
      RECENT
    </ion-col>

    <ion-col>

    </ion-col>
  </ion-row>

  <ion-list *ngIf="mockRecentData" class="gray-bottom-line" lines="none" style="padding-bottom: 20px;">
    <ion-item *ngFor="let recent of mockRecentData">
      <ion-avatar item-start class="avatar-small">
        <img src="assets/noavatar.png">
      </ion-avatar>

      <h2 class="avatar-text">{{recent}}</h2>
    </ion-item>
  </ion-list>

  <ion-row style="margin: 15px;">
    <ion-col class="add-collection-header">
      YOUR BOARDS
    </ion-col>

    <ion-col>

    </ion-col>
  </ion-row>

  <ion-list *ngIf="mockYourBoards" lines="none">
    <ion-item *ngFor="let recent of mockYourBoards">
      <ion-avatar item-start class="avatar-small">
        <img src="assets/noavatar.png">
      </ion-avatar>

      <h2 class="avatar-text">{{recent}}</h2>
    </ion-item>
  </ion-list>

</ion-content>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button (click)="save()" size="small" color="white">
    <fa-icon style="color: violet" [icon]="['fas', 'plus']"></fa-icon>
  </ion-fab-button>
</ion-fab>
Dino Saciragic
  • 11
  • 2
  • You can try adding `style="z-index:99;"` to .. I suspect, in the view, modals are placed above everything else and that is why your fab is not visible.. – Chetan Bansal Aug 21 '20 at 18:48
  • 1
    Yes the modal is placed above the ion fab, but adding style="z-index:99;" to does nothing. – Dino Saciragic Aug 23 '20 at 12:06
  • @DinoSaciragic did you ever find a solution to this? I have the exact same problem and nothing seems to fix it! – Kay Apr 09 '21 at 14:27
  • Oh actually i think I just figured this out. For me it works if the ion-fab is inside a div and then inside the ion-content. so something like:
    .....     .     – Kay Apr 09 '21 at 15:00

2 Answers2

1

There are two things to consider here -

1. As per Ionic's documentation, the Modal is a dialog that appears on top of the app's content. This means Modals will always appear at the topmost stack of your app. This is why, if you have a Tabbed app and open a Modal, all tabs will be hidden underneath the Modal page.

2. As with Fab button, here Ionic says, "FABs generally float over the content in a fixed position. This is not achieved exclusively by using an FAB. They need to be wrapped with a component in order to be fixed over the content."

Therefore, you may try by NOT WRAPPING your <ion-fab-button> with ion-fab. You may place the <ion-fab-button> at a fixed place on the modal through Modal Component's SCSS file.

Arup Bhattacharya
  • 846
  • 9
  • 24
1

As a workaround, invoke hardware acceleration on fixed fabs inside modals by setting

ion-fab {
    transform: translateZ(0);
}

reference: CSS performance relative to translateZ(0)

cpc
  • 608
  • 6
  • 22