Search code examples
cssangularionic-frameworkionic5

ion-icon inside clickable ion-card does not work with float: right

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

floating icon buttons do not show up on Chrome Element inspection

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;
}
Solution

  • The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

    In addition to indicating that the element is not the target of pointer events, the value none instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.

    /* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;