CODEWITHSUNDEEP
javascripthtmlcss
atschaal
atschaal

Reputation: 355

Chat box hangout-like triangles

I am coding a relatively simple SignalR Chat and it has been pretty successful so far. However, I'd like to style it similar to Hangouts or other popular chats. My problem is these red triangles below. I've looked at several sources trying to replicate this, but I've been unsuccessful. Here's what it looks like now (below).

Chat I'd like

Unfortunately, this does not work when I'm scrolling or I've added more message than fit in the container.

Chat Issues

I'm not a CSS expert by any means, but I assume this has to do with the absolute positioning. Below is some of my code and css. Please let me know if you'd like more info. I'd appreciate any help/ideas I can get, thank you.

The chat messages are again, super simple, and the html is generated by js:

$('#' + ctrId).find('#divMessage').append('<div style="padding:5px;">' +
    '<div class="message private-message pm-other">' + 
        '<p>' + message + '</p>' + 
        '<time>' + fromUserName + '<strong> · </strong>' + time + '</time>' + 
    '</div>' +
'</div>');

Here is the CSS to go along with that:

.private-message {
    background: white;
    padding: 10px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.private-message p {
    font-size: 0.90em;
    margin: 0 0 0.05em 0;
}
.private-message time {
    font-size: 0.80em;
    color: #ccc;
}
.private-message:before{
    content: "";
    position: absolute;
    right: 95%;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-right: 13px solid red;
    border-bottom: 13px solid transparent;
}

Upvotes: 4

Views: 415

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

Add position: relative; this parent div message private-message pm-other

replace this 

 $('#divMessage').append('<div style="padding:5px; position: relative;"><div class="message private-message pm-other"><span class=""></span><p>' + message + '</p>' + '<time>' + fromUserName + '<strong> · </strong>' + time + '</time></div></div>');

Upvotes: 3

Related Questions