CODEWITHSUNDEEP
androidiosangularionic-framework
antoine dieval
antoine dieval

Reputation: 38

Ionic fab button not working at first click

I'm using ion-fab button in my project like this : 

<ion-fab right item-end>
    <button ion-fab mini><ion-icon name="arrow-dropleft"></ion-icon></button>
    <ion-fab-list side="left">
      <button ion-fab color="danger" (click)="delete(user?._id)"><ion-icon name="trash"></ion-icon></button>
      <button ion-fab color="secondary" (click)="modify(user?._id)"><ion-icon name="cog"></ion-icon></button>
    </ion-fab-list>
</ion-fab>

This ion-fab is in an ion-item list.

That work perfectly except at the first launch of my app. Nothing happens until I kill the app and re launch her.

My ionic information : 

Ionic:

ionic (Ionic CLI)  : 4.1.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework    : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.11

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms     : android 7.0.0, browser 5.0.3, ios 4.5.5
Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 11 other plugins)

System:

ios-deploy : 2.0.0
NodeJS     : v8.9.1 (/usr/local/bin/node)
npm        : 5.10.0
OS         : macOS High Sierra
Xcode      : Xcode 9.4.1 Build version 9F2000

Upvotes: 1

Views: 4892

Answers (1)

Lightbeard
Lightbeard

Reputation: 4131

See the working examples in the Ionic 4 docs: https://github.com/ionic-team/ionic-framework/blob/4.0.x/core/src/components/fab/test/basic/index.html

   <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
        <ion-fab-button onclick="alert('mini')" mini class="e2eFabTopRight">
          <ion-icon name="arrow-dropleft"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="left">
          <ion-fab-button onclick="alert('trash')">
            <ion-icon name="trash"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="alert('cog')">
            <ion-icon name="cog"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
   </ion-fab>

Upvotes: 1

Related Questions