2

I'm trying to implement chat bubble CSS from this answer, the problem is I don't know how to give border-bottom-left-radius to the first third message by other user and border-bottom-right-radius to the fourth message by this user. Please run this code snippet to understand what I'm saying. Thanks in advance.

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

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

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

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

.incoming:first-child{
  border-bottom-left-radius: 5px;
}

.outgoing:first-child{
  border-bottom-right-radius: 5px;
}

.incoming + .outgoing{
  border-bottom-right-radius: 5px;
}

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

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

.outgoing + .incoming{
  border-bottom-left-radius: 5px;
}

.incoming + .incoming{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.incoming:last-of-type {
  border-bottom-left-radius: 30px;
}
<ul  class='chat-ul' style='margin-top: 10px'>
 <li class="chat-li incoming">By Other User, first message</li>
 <li class="chat-li incoming">By Other User, second message</li>
 <li class="chat-li incoming">By Other User, third message</li>
 <li class="chat-li outgoing">By this User, first message</li>
 <li class="chat-li outgoing">By this User, secondmessage</li>
 <li class="chat-li outgoing">By this User, third message</li>
 <li class="chat-li outgoing">By this User, fourth message</li>
 <li class="chat-li incoming">By Other User, first message</li>
 <li class="chat-li incoming">By Other User, second message</li>
 <li class="chat-li incoming">By Other User, third message</li>
</ul>
magi182
  • 3,427
  • 1
  • 15
  • 23
Irma Elita
  • 249
  • 3
  • 14
  • Are you able to wrap them inside separate `
      ` depending on who the message is from?
     – fubar Aug 15 '17 at 05:10
  • he already added the link, and this is not duplicated because the other answer is not the right one for this – Gerrit Halfmann Aug 15 '17 at 05:14
  • Your css shouldn't work because the css tags shouldn't work that way. last-of-type tag will only work on element selectors not class selectors. In my opinion you need to wrap them with another div/ul otherwise selecting the specific element dynamically is not possible in your scenario unless you use some js. – Aslam Aug 15 '17 at 05:23
  • In CSS that is not possible, you need to wrap each group of the messages in a separate wrapper. So you have to do the wrapping at server side. – Muhammad Aug 15 '17 at 06:03

1 Answers1

3

I think the solution is more simple then you think. First, if you want to have this a flexible as possible put each "user-chat-item-history" in a separate <ul> with the class for .outgoing or .incoming. Therefore you need less CSS and the whole script is way more maintainable:

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

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

.incoming .chat-li {
  background: #eee;
  float: left;
  border-radius: 5px 30px 30px 5px;
}

.outgoing .chat-li{
  float: right;
  background: #0084ff;
  color: #fff;
  border-radius: 30px 5px 5px 30px;
}

.incoming .chat-li:first-child {
  border-top-left-radius: 30px;
}

.incoming .chat-li:last-child {
  border-bottom-left-radius: 30px;
}

.outgoing .chat-li:first-child {
  border-top-right-radius: 30px;
}

.outgoing .chat-li:last-child {
  border-bottom-right-radius: 30px;
}
<ul  class='chat-ul incoming' style='margin-top: 10px'>
 <li class="chat-li">By Other User, first message</li>
 <li class="chat-li">By Other User, second message</li>
 <li class="chat-li">By Other User, third message</li>
</ul>

<ul  class='chat-ul outgoing' style='margin-top: 10px'>
 <li class="chat-li">By this User, first message</li>
 <li class="chat-li">By this User, secondmessage</li>
 <li class="chat-li">By this User, third message</li>
 <li class="chat-li">By this User, fourth message</li>
</ul>

<ul  class='chat-ul incoming' style='margin-top: 10px'>
 <li class="chat-li">By Other User, first message</li>
 <li class="chat-li">By Other User, second message</li>
 <li class="chat-li">By Other User, third message</li>
</ul>
Gerrit Halfmann
  • 1,332
  • 8
  • 17
  • Adding `
      ` would require additional js logic when pushing/adding new message or retrieving history, but certainly would make css easier to read and maintain.
     – kamyl Aug 15 '17 at 05:20