右图标显示时，离子列表按钮会调整大小

Posted 2021-03-30

我动态显示/隐藏列表右侧的图标。但是，当图标显示时，ion-item会稍微扩大一点。

知道如何解决这个问题吗？绝对不是那样的好用户体验。

<ion-list>
    <ion-item-divider color="primary">
      Select
    </ion-item-divider>
    <button ion-item *ngFor="let property of properties; let i = index" (click)="propertySelected(property)" >
      {{ property }}
      <ion-icon *ngIf="propertySet[i]" name="checkmark" item-end></ion-icon>
    </button> 
  </ion-list>

答案

    // implementes css for ion-icon
ion-icon{
   position: absolute or fixed;
   width: 10px;
   right: 10px;
}

必须使css成为固定图标，其大小优于您必须提交的图标