Richard Richard - 2 months ago 7
CSS Question

CSS Positioning of an element

I am building a chat component in my app.

I have the following:

enter image description here

I would like to position the tick to the right of the time, and make the tick blue. Much like WhatsApp does it.

Any CSS advise appreciated.

Thank you

html

<span class="time-tick">
<span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
<div *ngIf="message.readByReceiver && senderId == message.senderId">
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
</div>
</span>


css

.messages-page-navbar {
.chat-picture {
width: 50px;
border-radius: 50%;
float: left;
}

.chat-title {
line-height: 50px;
float: left;
}
}

.messages-page-content {
> scroll-content {
padding: 0;
}

.messages {
height: 100%;
background-image: url(/assets/chat-background.jpg);
background-color: #E0DAD6;
background-repeat: no-repeat;
background-size: cover;
}

.message-wrapper {
margin-bottom: 9px;

&::after {
content: "";
display: table;
clear: both;
}
}

.message {
display: inline-block;
position: relative;
max-width: 236px;
border-radius: 7px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);

&.message-mine {
float: right;
background-color: #DCF8C6;

&::before {
right: -11px;
background-image: url(/assets/message-mine.png)
}
}

&.message-other {
float: left;
background-color: #FFF;

&::before {
left: -11px;
background-image: url(/assets/message-other.png)
}
}

&.message-other::before, &.message-mine::before {
content: "";
position: absolute;
bottom: 3px;
width: 12px;
height: 19px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
}

.message-content {
padding: 5px 7px;
word-wrap: break-word;

&::after {
content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
display: inline;
}
}

.message-timestamp {
position: absolute;
bottom: 2px;
right: 7px;
font-size: 12px;
color: gray;
}
}
}

.message-datetime {
font-size: 11px;
color: grey;
}

.messages-page-footer {
padding-right: 0;

.message-editor {
margin-left: 2px;
padding-left: 5px;
background: white;
border-radius: 3px;
}

.message-editor-button {
background: color($colors, whatsapp);
box-shadow: none;
width: 50px;
height: 50px;
font-size: 17px;
margin: auto;
}
}

.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}

.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}

.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}

.time-tick {
display:inline-block;
}

Answer

Under message-timestamp in your CSS, increase the right value from 7px up to about 15px.

Then under .checkmark, add the following:

position: absolute;
bottom: 2px;
right: 7px;
Comments