How to create chat bubbles like facebook Messenger

Question

How would I create chat bubbles like this. More specifically how to group two ore more consecutive messages by one type of user into a bubble as a whole. For example FOR THE SENDER - the first message has right bottom border a 0, the messages in between have right top,bottom as 0 border radius and the last one has top right 0 border radius . Do I have to use javascript or can it be done using css.

HTML structure ca be

<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>

What kind of css class/styles should i be using?

Doviedow

just wanted to check in, are you able to accept my answer? – Fowkes

Answer 1

This is a rather basic example but it should explain all of the fundamentals you require.

Most of the solution lies within + adjacent sibling selector. In this case, it's used to apply a different border radius to multiple messages in a row from the same person.

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  display:inline-block;
  clear: both;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.him{
  background: #eee;
  float: left;
}

.me{
  float: right;
  background: #0084ff;
  color: #fff;
}

.him + .me{
  border-bottom-right-radius: 5px;
}

.me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.me:last-of-type {
  border-bottom-right-radius: 30px;
}

<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>

Fowkes

Hi, This is what I wanted .. but I wanted to keep things simple. There are lot of nested classes. But like you said I just wanted the direction. Nevertheless, I am gonna try it and update you @SergChernata – Doviedow

Nah, This is an angular js project so i cannot differentiate between blocks of me messages or him messages. It is an array of objects. Only thing I can do is to add him and me classes. – Doviedow

Thanks guys. I think I have got it. Let me try it. Sorry if the question was misleading. I already have too many watchers so wanted a css solution. But guess I will have to have some angular js watchers to fix this along with the css you guys gave – Doviedow

You cannot use a class selector for last-of-type this will not work – Colorist

Answer 2

I would suggest following this article for help when it comes to creating text bubbles: https://www.templatemonster.com/blog/chat-bubbles-css-ui-tutorial/

As for the beginning and ending bubbles, use JQuery to identify and change their CSS properties based on their parent container. if you want the sent images, you will need to wrap them inside of the li and do a float right, or absolute position inside of a relative object (the li).

<ul class="ulContainer">
  <li>test1</li>
  <li>test1</li>
  <li>test1</li>
</ul>

Css:

.ulContainer li{
  width:200px;
  height:20px;
  background-color:#9abff9;
  list-style-type:none;
  margin:10px 0 10px 0;
  padding: 3px 3px 3px 5px;
  border-radius: 10px 2px 2px 10px;
}

Use below script to change first and last li:

$('.ulContainer li:first').css('border-top-right-radius','10px');
$('.ulContainer li:last').css('border-bottom-right-radius','10px');

here's the JSFiddle: https://jsfiddle.net/s60dgfw2/

Update based upon your comment:

I believe this is the closest you can get to what you are trying to achieve without using JQuery. You need advanced selectors you can only get from grouping in .each() statements through JQuery. Or by adding multiple css classes to Lists.

Please see the response by LGSon's for how to do it with multiple CSS classes.

Or see below:

https://jsfiddle.net/5dcto0td/

.fancyContainer{
  border: 1px solid #555;
  position:relative;
  width:300px;
  padding:5px;
  overflow:hidden;
}
.chatBox {
  width: 300px;
  list-style: none;
  margin: 0 0 0 -40px;
  position:0;
}

.chatBox li {
  margin: 5px 0 5px 0;
  padding: 3px 5px 3px 5px;
}

/*Set up initial chat element for .me*/
.chatBox .me {
  min-height: 20px;
  float:right;
  clear: both;
  background-color: #34a1ef;
  border-radius: 10px 2px 2px 10px;
}

/*Set up initial chat element for .him*/
.chatBox .him {
  min-height: 20px;
  float:left;
  clear: both;
  background-color: #ddd;
  border-radius: 2px 10px 10px 2px;
}
/*Set up grouped radius*/
.him + .me {
  border-top-right-radius:10px;
}
.me + .him {
  border-top-left-radius:10px;
}
.me + .me {
  border-bottom-right-radius:2px;
}
.him + .him {
  border-bottom-left-radius:2px;
}


/*Set up First and Last radius for .me*/
.chatBox > .me:first-child {
  border-top-right-radius:10px;
}
.chatBox > .me:last-child{
  border-bottom-right-radius:10px;
}

/*Set up First and Last radius for .him*/
.chatBox > .him:first-child{
  border-top-left-radius:10px;
}
.chatBox > .him:last-child{
  border-bottom-left-radius:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fancyContainer">
  <ul class="chatBox">
    <li class="him">Hello... This is a chatbox.</li>      
    <li class="me">Well well. I guess this is a chatbox.</li>
    <li class="me">I'll have to talk about this some other time.</li>
    <li class="me">No wait. I might change my mind</li>
    <li class="him">Nonesense good sir! We'll have this talk right now and here.</li>
    <li class="him">I Like...</li>
    <li class="him">popsicles.</li>
    <li class="me">I can't believe you've done this to me!</li>
  </ul>
</div>

Supercilious

From the look of it what you are suggesting would require different parent <ul> cause it is a continuous chat... and it has proper structure. I cannot group same side messages dynamically using js. and moreover it is an angular js project – Doviedow

What you are trying to achieve cannot be done by using CSS alone. It requires advanced grouping of each li "me" and "him". CSS natively cannot do that with a single class without extensions such as SASS. You can do it with multiple classes attributed to the li however. I've updated my post with the best possible solution without anything past single class CSS. – Supercilious

Answer 3

You will need a start and a end class, like this

li {
  border: 1px solid black;
  list-style-type: none;
  margin: 2px 0;
  padding: 2px 5px;
}
.him {
  float: left;
  border-radius: 0 10px 10px 0;
  clear: both;
}
.me {
  float: right;
  border-radius: 10px 0 0 10px;
  clear: both;
}
.him.start {
  border-top-left-radius: 10px;  
}
.him.end {
  border-bottom-left-radius: 10px;  
}
.me.start {
  border-top-right-radius: 10px;  
}
.me.end {
  border-bottom-right-radius: 10px;  
}

<ul>
 <li class="him start">By Other User</li>
 <li class="him">By Other User</li>
 <li class="him end">By Other User</li>
    
 <li class="me start">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me end">By this User, fourth message</li>

 <li class="him start">By Other User</li>
 <li class="him">By Other User</li>
 <li class="him end">By Other User</li>
    
 <li class="me start">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me end">By this User, fourth message</li>

</ul>

Pigg

Answer 4

Here is a pure css solution, but it hinges on your ability to detect and apply the chat__bubble--stop class when the final message of a group is sent. Unfortunately the pseudo class :last-of-type can't be used; as others have pointed out, the last message in a group isn't necessarily the last of the conversation. It also makes use of the adjacent sibling selector (+).

.chat {
  list-style-type: none;
  width: 20em;
}

.chat__bubble {
  margin-bottom: 3px;
  padding: 5px 10px;
  clear: both;
  border-radius: 10px 10px 2px 2px ;
}

.chat__bubble--rcvd {
  background: #f2f2f2;
  color: black;
  float: left;
  border-bottom-right-radius: 10px;
}

.chat__bubble--sent {
  background: #0066ff;
  color: white;
  float: right;
  border-bottom-left-radius: 10px;
}

.chat__bubble--sent + .chat__bubble--sent {
  border-top-right-radius: 2px;
}

.chat__bubble--rcvd + .chat__bubble--rcvd {
  border-top-left-radius: 2px;
}

.chat__bubble--stop {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

<ul class="chat">
 <li class="chat__bubble chat__bubble--rcvd chat__bubble--stop">What are you up to?</li>
 <li class="chat__bubble chat__bubble--sent">Not much.</li>
 <li class="chat__bubble chat__bubble--sent">Just writing some CSS.</li>
 <li class="chat__bubble chat__bubble--sent">I just LOVE writing CSS.</li>
 <li class="chat__bubble chat__bubble--sent chat__bubble--stop">Do you?</li>
 <li class="chat__bubble chat__bubble--rcvd">Yeah!</li>
 <li class="chat__bubble chat__bubble--rcvd">It's super fun.</li>
 <li class="chat__bubble chat__bubble--rcvd chat__bubble--stop">... SUPER fun.</li>
</ul>

Sheikh