Ionic Align Avatar On Top


#1

Hi,

How can I align avatar on top?

I would like to move the avatar as shown below

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


Ion-item button and aligning an avatar to top
#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.


#5

Thank you very much @elvis_gn. Your suggestion worked.


#6

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