Chat UI in ionic 3

Ionic Framework ionic-v3
1

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

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.

2

Hi @rajbasilio

Looks like the float: left and float:right is what causing the messages to shown next to each other.

I would suggest rather use the ion-grid with ion-row and ion-col. Then add the text-right attribute to the ion-col to place items the right. You can add the *ngFor="let msg of messages" on the ion-row tag, so each message will have it’s own row

3 
<ion-content>
  <ion-grid>
    <ion-row *ngFor="let message of messages">
      <ion-col col-9 *ngIf="message.from!==currentUser" class="message" [ngClass]="{'mymessage': message.from === currentUser, 'othermessage': message.from !== currentUser}">
        <span class="user_name">{{ message.from }}:</span>
        <br>
        <span>{{ message.text }}</span>
        <div class="time">{{message.created | date:'dd.MM hh:MM'}}</div>
      </ion-col>

      <ion-col offset-3 col-9 *ngIf="message.from===currentUser" class="message" [ngClass]="{'mymessage': message.from === currentUser, 'othermessage': message.from !== currentUser}">
        <span class="user_name">{{ message.from }}:</span>
        <br>
        <span>{{ message.text }}</span>
        <div class="time">{{message.created | date:'dd.MM hh:MM'}}</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

and the css


  .user_name {
    color: #afafaf;
  }
  .message {
    padding: 10px !important;
    transition: all 250ms ease-in-out !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
  }
  .mymessage {
    background: color($colors, primary) !important;
    color: #000 !important;
    border-top-right-radius: 0px !important;
  }
  .othermessage {
    background: #dcdcdc !important;
    color: #000 !important;
    border-top-left-radius: 0px !important;
  }
  .time {
    color: #afafaf;
    float: right;
    font-size: small;
  }
  .message_row {
    background-color: #fff;
  }
1 Like
4

Stumbled on this myself…

To get the bubbles aligned, just insert “clear: both;” to both .innermsg.left and .innermsg.right:

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

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