Chat UI in ionic 3

@rajbasilio wrote:

I have tried to create a chat UI. I’m having the trouble with the placement of chat bubbles. It is as

This is my HTML code

<ion-list no-lines class="msgbubble" *ngFor="let msg of messages">
    <div class="innermsg left" *ngIf="userId != msg.id">
      {{ msg.reply }}
    </div>
    <div class="innermsg right" *ngIf="userId == msg.id">
        {{ msg.reply }}
    </div>
</ion-list>

This is my scss code

.innermsg {
        display: inline-block;
        padding: 5px 10px;
        margin: 5px;
        font-weight: 500;
        font-size: 16px;
        border-radius: 15px;
        margin-bottom: 5px;
    }

    .innermsg.left {
        float: left;
        background-color: #F1F0F0;
        color: black;
    }

    .innermsg.right {
        float: right;
        //margin-right: 10%;
        background-color: #0084FF;
        color: white;
    }

    .msgbubble {
        margin-bottom: 10px;
    }

Can someone help me in displaying chat bubbles on after the another, but not in the same line as shown in above picture.

Posts: 1

Participants: 1

Read full topic