Ionic Align Avatar On Top

@just10minutes wrote:

Hi,

How can I align avatar on top?

I would like to move the avatar as shown below

Capture.JPG425x578 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

Posts: 6

Participants: 2

Read full topic