Using Ionic2, I have an application with messages. In a browser, the message appears like this:
https://i.stack.imgur.com/SyCtM.png
However, when running on either an Android or iOS device, it looks different:
https://i.stack.imgur.com/i0RdO.png
The distinguishing tail on each message is missing.
Query
I need guidance on how to maintain consistent styling and display the tail across all devices.
HTML
<ion-content padding class="messages-page-content">
<ion-list class="message-list">
<ion-item class="message-item" *ngFor="let item of firelist | async">
<div [ngClass]="{'message message-me':(item.memberId1 == me.uid)}">
<div [ngClass]="{'message message-you':(item.memberId1 == you.uid)}">
<div class="message-content">{{item.message_text}}</div>
<span class="time-tick">
<span class="message-timestamp-date">{{item.timestamp | amDateFormat: 'D MMM YY'}}</span>
<span class="message-timestamp">{{item.timestamp | amDateFormat: 'h:mm a'}}</span>
<div *ngIf="item.memberId1 === me.uid && item.readByReceiver === true">
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
</div>
</span>
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
CSS
Refer to:
background-image: url(/assets/message-me.png);background-image: url(/assets/message-you.png);.title-timestamp {
font-size: 11px;
color: gray;
}
.message-item {
background-color: transparent;
}
.label {
overflow: visible;
white-space: normal;
}
... (omitted for brevity) ...
.checkmark_kick {
position: absolute;
width:2px;
height:3px;
background-color:#3BB9FF;
left:13px;
top:12px;
}
.time-tick {
display:inline-block;
}
UPDATE
Following the advice given, I made the following additions:
CSS
.tail-me {
background-image: url(/assets/message-me.png);
background-repeat: no-repeat;
bottom: 0;
right: -11px
}
.tail-you {
background-image: url(/assets/message-you.png);
background-repeat: no-repeat;
bottom: 0;
left: -11px
}
HTML
<ion-item class="message-item tail-me" *ngFor="let item of firelist | async">
This results in the following appearance on the browser:
https://i.stack.imgur.com/KklHi.png
However, the tail is incorrectly positioned. If changed to absolute positioning, it disrupts the bubble layout entirely. The use of the left and bottom CSS properties affects the position of the message bubbles. It seems that the tail-me class may be applied to the wrong HTML tag. Any suggestions?
On both iOS and Android devices, the tail remains absent: