I am struggling to position this icon image at the bottom right hand corner of this div, so that it appears as if the message is originating from the icon's head. Despite my efforts, I have yet to find a definitive solution.
https://i.stack.imgur.com/XkHz1.jpg
Below is the relevant portion of CSS code:
.messageContainer{
width:100%;
position: relative;
}
.message.to {
border-radius: 3em 3em .5em 3em;
background-color: black;
color: #fff;
float:right;
margin-right: 30px;
margin-left: 12em;
}
img.to{
position: absolute;
right: 0px;
bottom: 0px;
float:right;
width: 24px;
height: 24px;
content:url("https://cdn2.iconfinder.com/data/icons/ui-1/60/05-512.png");
}
Next, the relevant snippet of HTML using Angular:
<ng-container *ngFor="let message of messages | async">
<div class="messageContainer">
<img class="icon" [ngClass]="{ 'from': message.sentBy === 'bot',
'to': message.sentBy === 'user' }"/>
<div class="message" [ngClass]="{ 'from': message.sentBy === 'bot',
'to': message.sentBy === 'user' }" [innerHTML]=message.content>
</div>
</div>
</ng-container>
Here is the suggested HTML structure without Angular:
<div class="messageContainer">
<img class="icon to">
<div class="message to" >example message where i want the icon to be in the bottom right hand corner of the div</div>
</div>