Search code examples
jquerybootstrap-5

unable to select top icon in a vertical stack using bootstrap

I'm trying to create selectable icons to initiate the sorting of a date column. I'm using Bootstrap 5 and font awesome icons. Visually, everything is fine.

<style>
    .sort-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .sort-wrapper i.fa{
      line-height: 0;
      margin: 0 auto;
    }

    .clickable {
      cursor: pointer;
      transition: transform 0.2s;
    }

    .clickable:hover {
      transform: scale(1.1);
    }
</style>

<div class="d-flex justify-content-start">
   Release Date
   <div class="sort-wrapper ms-3">
     <i id="ascending" class="fa fa-sort-up fa-lg clickable" ></i>
     <i id="descending" class="fa fa-sort-down fa-lg clickable" ></i>
   </div>
</div>

gives me

vertically stacked sort icons

which is what I intended. However, when I throw in some jquery to trigger based on the selection ...

$('#ascending').click(function() {
  console.log("ascending");
});

$('#descending').click(function() {
  console.log("descending");
});

What I experience is that the "ascending" icon is never selectable. When I click on it I always get the "descending" message. I also noticed a strange behavior when I tried to add tooltips to the icons. The "descending" icon would behave properly, but not the "ascending" icon.

Is there some oddity associated with clickable items being too close to each other?

Solution

  • My problem was that the descending font awesome icon was completely covering the ascending icon. I could see this clearly by adding the fa-border class and setting the line-height to 1.

    enter image description here