How to place ion-avatar top-left of an ion-item?

Question

I have an ion-item with ion-avatar and ion-label with large text. For showing full text in ion-label i added a class 'ion-text-nowrap' to ion-label. It works fine. But the problem is ion-avatar automatically placed to vertical center of ion-item. I don't need to align avatar vertical align middle. I want that align left-top of ion-item. How can i do that?

This is my code:

<ion-item>
  <ion-avatar slot="start">
    <img [src]="img">
  </ion-avatar>
  <ion-label class="ion-text-nowrap">
    <p>{{text}}</p>
  </ion-label>
</ion-item>

Tomas Vancoillie Tomas Vancoillie · Accepted Answer · 2019-09-09T09:43:31

There are no css properties to achieve this in Ionic. But it is possible by overwriting the css of the ion-avatar and ion-label.

Change the position of the avatar to absolute and place it in the top corner of the item. Then adjust the label margin to place the text back where you want it.

ion-avatar{
  position: absolute;
  top: 0px;
  left: 0px;
}

ion-label{
  margin-left: // size needed
}

Example output:

How to place ion-avatar top-left of an ion-item?

1 Answers