Virtual Scroll Change Size of Single Item


I am working on implementing a VirtualScroll list. My current implementation is:

<ion-list #virtualScroll [virtualScroll]="items" approxItemHeight="52px" >

    <div *virtualItem="let item">

      <button ion-button (click)="handleClick(item)" [style.height]="item.isSelected ? '70px' : '52px'" >

        <ion-icon name="square" class="tile-icon"></ion-icon>

        <div class="label-container">

          <ion-label text-left>{{property.p1}}</ion-label>
          <ion-label text-left>{{property.p2}}</ion-label>


        <ion-icon name="square" class="cellular-icon"></ion-icon>
        <ion-icon name="square" class="gateway-icon"></ion-icon>




With just this code, when I click on one of the items/buttons the size of that button changes, but none of the other items move, so it overlaps them. I can adjust the click handler to include the following:

handleClick( item ) {
   item.isSelected = !item.isSelected;

It will adjust the locations of all of the other items, but it also recalculates the item list, and the item that was clicked (and the size was adjusted for) jumps to a new location.

Any suggestions of how to get the benefits of the virtual scroll, along with the ability to click and resize a single item in the list without having its location jump?


Any ideas or thoughts on this??