I am facing an issue with a list of ion-cards that have clickable icons appearing when you hover over them. The problem is that due to the floating nature of the icons, they are not positioned correctly (as shown in the image below) and end up getting covered by the ion-card click event. I tried using $event.stopPropagation(), but it didn't resolve the issue.
So my question is: How can I make the ion-icons clickable without affecting the position of other elements?
Thank you in advance.
https://i.sstatic.net/V2oHN.png
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;
}