CODEWITHSUNDEEP
iosangularionic-frameworkionic4
Dino Saciragic
Dino Saciragic

Reputation: 11

Can not see Ion fab in modal on iOS Ionic 4

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>

Upvotes: 1

Views: 1500

Answers (2)

cpc
cpc

Reputation: 638

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)

Upvotes: 2

Arup Bhattacharya
Arup Bhattacharya

Reputation: 856

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.

Upvotes: 1

Related Questions