Ionicon inside clickable ion-card does not work with float

@th4t-gi wrote:

I posted this question on stack over first here.

I have a list of ion-cards that are clickable with a set of icons that appear when you hover over it. My problem is that the floating nature of the icons means that they are not actually where they look to be (shown in the image below) and so the ion-card click covers it up. I already know that I need $event.stopPropagation() in there but that does not fix it.

My question is then: How could I be able to click the ion-icons but not disrupt the position of any other elements in the process?

Thanks in advance

HTML

<ion-card *ngFor='let packet of packets; let i = index' (click)='mobile? presentActionSheet(packet): navToPacket(packet)'>
  <div id='card-icons'>
    <ion-icon (click)='editMeta(packet); $event.stopPropagation()' name="create-outline"></ion-icon>
    <ion-icon (click)='nav(["packet", packet.meta.computer.id, "stats"]); $event.stopPropagation()'
      name="bar-chart-outline">
    </ion-icon>
    <ion-icon (click)='presentMoreActionSheet(packet)' name="ellipsis-vertical"></ion-icon>
  </div>

  <ion-card-header>
    <ion-card-subtitle>Awesome Subtitle</ion-card-subtitle>
    <ion-card-title>Awesome Title</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    Awesome content
  </ion-card-content>
</ion-card>

CSS

#card-icons {
  ion-icon {
    font-size: 30px;
    padding: 10px 5px;
  }
  visibility: hidden;
  float: right;
}
ion-card:hover #card-icons {
  visibility: visible;
}

Posts: 1

Participants: 1

Read full topic