How to display text under ion-avatar in ionic 5?

user_10120711 0
Viewed 389

In ionic 3 appliction, I use below code to display a group of images and the name of the image under the image.

 <ion-list >
      <ion-item>
        <ion-row>
          <ion-col *ngFor="let item of items">
            <ion-avatar>
              <img [src]="item.profilepic"/>
            </ion-avatar>
            <p>{{item.nameAbbreviation}}</p>
          </ion-col>
        </ion-row>
      </ion-item>
  </ion-list>

I use the same code in ionic 5. But the display shows some diffences: the ion-avatar image's size becomes much larger and the space between image and text becomes much wider.

I made changes as below, then the image size becomes the same as in ionic 3, but the text is shown at the same line of the image.

  <ion-list >
       <ion-row>
          <ion-col *ngFor="let item of items">
           <ion-item>
            <ion-avatar>
              <img [src]="item.profilepic"/>
            </ion-avatar>
            <p>{{item.nameAbbreviation}}</p>
           <ion-item>
          </ion-col>
        </ion-row>
      </ion-item>
  </ion-list>

Can you tell me what is the correct code to display text under ion-avatar in ionic 5?

ionic5
1 Answers

Hope you find your solution here. Please use following code :

<ion-row style="border: 2px solid green">
    <ion-col size="2">
      <ion-avatar>

        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" style="border: 2px solid black;">
        <span style="border: 2px solid red;">TExt Text Text</span>
      </ion-avatar>
    </ion-col>
    <ion-col size="10" style="padding: 3em;"><b>IONAVATAR DEMO Image With Text</b></ion-col>


  </ion-row>

Output :

RedBorder display the text and you can place your text content there.........!!!!!

output

user_149065840
Related