Ionic Align Avatar On Top

Ionic Framework ionic-v3
1

Hi,

How can I align avatar on top?

I would like to move the avatar as shown below

image
Capture.JPG425Ă—578 33.8 KB

html:

<ion-list>
  <ion-item *ngFor="let comment of videoComments">
    <ion-avatar item-start>
      <img src={{comment.snippet.topLevelComment.snippet.authorProfileImageUrl}}>
    </ion-avatar>
    <h3 style="white-space: pre-line; color:blue; margin-top: 0px;">{{comment.snippet.topLevelComment.snippet.authorDisplayName}}</h3>
    <h4 style="white-space: pre-line;" [innerHTML]="comment.snippet.topLevelComment.snippet.textDisplay"></h4>
    <p>{{comment.snippet.topLevelComment.snippet.publishedAt | date: 'mediumDate'}}</p>    
    <p>Reply &middot;<span *ngIf="comment.snippet.likeCount != 0">{{comment.snippet.likeCount}}</span>
    <span *ngIf="comment.snippet.totalReplyCount != 0">&nbsp;&nbsp; &middot; Show Replies</span></p>
    <div *ngIf="comment.snippet.totalReplyCount != 0">
      <ion-list>
        <ion-item *ngFor="let reply of comment.replies.comments">
          <ion-avatar item-start>
            <img src={{reply.snippet.authorProfileImageUrl}}>
          </ion-avatar>
          <h3 style="white-space: pre-line; color:blue; margin-top: 0px;">{{reply.snippet.authorDisplayName}}</h3>
          <h4 style="white-space: pre-line;" [innerHTML]="reply.snippet.textDisplay"></h4> 
          <p>{{reply.snippet.publishedAt | date: 'mediumDate'}}</p>         
        </ion-item>
      </ion-list>
    </div>
  </ion-item>
</ion-list>

Thank You

1 Like
2

Share the html for this page…the solution will depend on what you have already

3

Have added html now, there is no css changes have been done for this page on my app.

4

Ok, basically the avatar is aligned to the center of the item, as per design…

So either you can set a margin-top on the avatar and force it to the top
margin-top: 2px !important

Or you can create an ion-row and put the avatar and name into 2 ion-col

<ion-row>
   <ion-col col-3>
       <ion-avatar item-start>
          <img src={{comment.snippet.topLevelComment.snippet.authorProfileImageUrl}}>
       </ion-avatar>
   </ion-col>  
   <ion-col col-9>
      <h3 style="white-space: pre-line; color:blue; margin-top: 0px;">{{comment.snippet.topLevelComment.snippet.authorDisplayName}}</h3>
   </ion-col>
</ion-row>

I’d also recommend that you put the rest of the post into the next ion-row that spans the width of the ion-item…else you are losing a lot of the UI real estate.

3 Likes
5

Thank you very much @elvis_gn. Your suggestion worked.

image
Capture.JPG349Ă—564 29.6 KB

6

I am not sure will you be able to help me on this thread

7 
.avatar-top {
        margin: 16px 16px 8px 0;
        margin-bottom: auto;
}

<ion-avatar item-start  class="avatar-top">
            <img src={{comment.snippet.topLevelComment.snippet.authorProfileImageUrl}}>
</ion-avatar>
4 Likes
8

Thanks! This still helped me with Ionic 5 2 years later. margin-bottom: auto; was key.