Button inside of a clickable ion-card

Ionic Framework ionic-v3
1

I have a list of clickable cards. In the top right corner of each card is a fab. Clicking a fab fires the card’s click function along with the intended function. Is there any way to prevent this from happening?

Here’s the current structure:

<ion-card *ngFor="let style of this.styles" (click)="choose(style)">
  <img src="{{ style.image }}"/>
  <h1 class="card-title">{{ style.name }}</h1>
  <ion-fab top right>
    <button ion-fab (click)="showDescription($event, style.description)">
      <ion-icon name="information-circle"></ion-icon>
    </button>
  </ion-fab>
</ion-card>
2

I think the card wins. But it looks like your card has only the image as content. So try to move the card click to the image and the h1.

1 Like
3

That worked! Because the image covers the entire card I didn’t think it would.

Thanks!