Need help with CSS for Chat bubbles

HTML & CSS
1

Hey All,

So we are developing a Node.js based Web Chat.
Where the chat is offered in 2 Modes: Private & Public.
When in Private Chat mode the room owners message bubbles appear on the right side with their visitors message bubbles on left side, Same as the text messaging on your iPhone, etc. And a a key goal of this Chat is to offer seamless Web chat to people on Mobile as on Desktop/Laptop/
With above ground work laid down, we are having 2 problems with display of message bubbles when in Private chat mode, Problem 1 is that at times, rarely but it happens, the message bubbles from left overlap the ones from right side. Problem 2: at times, rarely but it happens, the message bubbles get crushed so one can not read the message. As you can see in images below. What is the CSS that would fix these rare but very bad problems with display of messages?

720Ă—1280 197 KB
1366Ă—768 158 KB

Thanks.

2

Are the bubbles floated, like my example here?
How to make a DIV expand width wise on right & left to Max width - #3 by SamA74

You can make the floats clear each other by adding clear: both

1 Like
3

That’s an awkward set up as only the right elements are floated and therefore the display:table elements on the left will allow the backgrounds and borders to slide into the float area (because that’s what floats do - they essentially repel foreground content).

A better structure as Sam said would have avoided this by keeping items in pairs and then clearing a whole row before the next one starts. Or better still a flexbox approach.

The only real solution with what you have go is to add a wrapper around the left message only and apply overflow:hidden to it.

e.g.

.wrap {
	overflow:hidden;
}

 <div class="wrap">
    <div class="msg_place">
      <div class="avatar_place"><img src="http://www.anoox.com/ask_answer/tn_fotos/dummy.jpg" width="36" height="36"></div>
      <div class="text_place">
        <div class="user_nick">G_7762017</div>
        test test test test test test test</div>
    </div>
  </div>

With that code in place the layout will change as shown in the screenshot below (bear in mind I have just created this roughly from partial snippets just to see the problem in effect and I am not sure in what order you output msg_place and msg_place_owner).

1103Ă—1034 243 KB

4

Paul,

Will your suggestion of adding the wraper around the left side message only, also take care off the message getting sometimes crushed, specially on Mobile phone Web browsers, as per 1st screen shot attached in my question?

Otherwise I am going to add the wraper class as you suggest and will test it.

Thanks,

5

No you need to add a min-width to hold them open. Something like this:

.wrap {
	overflow:hidden;
	min-width:150px;
	max-width:65%;
}
.msg_place {max-width:none;}

Or use a media query at smaller screens to make them all full width.

However I am a little uncertain of the logic you want for these left and right boxes because you may get the right ones sliding up higher than the left one. If that’s what you want then its ok but if you want them always to stay in pairs (where possible) then you would need to re-think the structure a little so that you can clear rows if floated or use another method.

Usually for messages like that it would seem logical that the they occupy a new line for each message rather than being paired because its hard to read a conversation in order when they are on the same line.

3 Likes
6

Paul,

I applied your solution and it seems to be working fine. Needs more testing. But 1 problem from it is that now the left side messages have lost their bottom of the DIV drop shadows as you can see in below image:

1920Ă—1080 294 KB

7 
.wrap {
	overflow:hidden;
	min-width:150px;
	max-width:65%;
}

The wrapper div has overflow hidden, which I don’t believe drop shadows are considered part of an elements dimensions, therefore it is being hidden by the container conforming to only the chat bubbles dimensions. You could set it to visible, but that could adversely affect how your container responds to inner content. I would just move your drop shadow up to the .wrap container. Make sure your wrappers don’t have background colors later on though. All subsequent elements in the DOM have higher z-index priority, and if you add background colors you will end up with the same problem.

You could also solve this by adding padding to your container as @SamA74 example does, which is a good UI design choice as well.

1 Like
8

I agree, that is the most logical way to do it. In fact I thought that was the intention all along in the other threads.

This layout seems to have been unintentionally created when I mentioned using display:table for the shrink to fit divs. Then right floats were added for the owner messages. All that happened in the thread that Sam linked to above.

You will also notice that the top guest message in that image, which has a lot of text, has had it’s width overpowered by the floated owner message beside it which is it’s full 65% width. Then you see how that same guest message has expanded vertically and created a line break.

Then when you get two messages back to back from guest or owner you will get another line break. So you got this mixture of messages on the same line and line breaks in the mix too. That seems confusing to me as well.

I would really consider having each message on it’s own line. It would also be best to stay away from mixing layout methods (display table & floats) as you see the problems that it is now causing.

In addition to the flexbox method that I had shown in one of your other threads. Here is another way of doing it with display:table; for both left and right messages. But it does set each message on it’s own line as that seems to be the logical way of doing it.:slight_smile:

You can simply push the divs left or right with auto margins and they will go left or right like floats, but without the headaches of floats.

.<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.wrap {
  width:90%;
  margin:auto;
  border:1px solid;
}
.msg {
  display:table;
  max-width:65%;
  margin:15px 5px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 4px 4px #888;
}
.owner {
  margin-left:auto;
  background:lightblue;
}
.guest {
  margin-right:auto;
  background:palegreen;
}
</style>

</head>
<body>

<div class="wrap">
  <div class="msg owner">
    Problem 1 is that at times, rarely but it happens, the message bubbles from left overlap the ones from right side.
    Problem 2: at times, rarely but it happens, the message bubbles get crushed so one can not read the message.
  </div>
  <div class="msg guest">
    Are the bubbles floated, like my example here?
  </div>
  <div class="msg owner">
    As you can see in images below. What is the CSS that would fix these rare but very bad problems with display of messages?
  </div>
  <div class="msg guest">
    That's an awkward set up as only the right elements are floated and therefore the display:table elements on the
    left will allow the backgrounds and borders to slide into the float area
  </div>
  <div class="msg owner">
    Will your suggestion of adding the wraper around the left side message only...
  </div>
  <div class="msg guest">
    No you meed to add a min-width to hold them open
  </div>
  <div class="msg guest">
    Usually for messages like that it would seem logical that the they occupy a new line for each message rather
    than being paired because its hard to read a conversation in order when they are on the same line.
  </div>
  <div class="msg owner">
    But 1 problem from it is that now the left side messages have lost their bottom of the DIV drop shadows as you can see in below image
  </div>
</div>

</body>
</html>
3 Likes
9

Paul,

I applied:

	min-width:150px;
	max-width:65%;

to .msg_place_wraper
and now the messages on Mobile phone by room guests are NO longer getting crushed if they room owner typed a long message. Thanks :slight_smile:

About your Meta point whether it is best to have messages sort of facing each other, as they are now, rather than each being on a new line, we have struggled with this question alot. And it seems it is more logical for messages to be as close to face each other rather each on a new line.

But I see most of you guys here think each message, between room owner and room guests, should be on a new line?
If so, how do we do that with the current code which now is:

.msg_place_wraper {
	overflow: hidden;
	min-width: 150px;
	max-width: 65%;
	padding-bottom: 5px;  /* This does show the drop shadow at bottom, but with a lil cut corner like */
}

 .msg_place, .msg_place_owner, .msg_place_1st {
	border: 1px solid gray;
	border-radius: 5px;
	margin-top: 5px;
	margin-left: 10px;
	position: relative;
	max-width: 65%;
	min-height: 35px;
	height: auto;
	background-color: #DAF7A6;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: table;
	padding: 5px;
}

.msg_place_owner {
	background-color: #BEE1F0;
	float: right;
	margin-right: 10px; 
	/* margin-left: 38%; */
	clear: right;
}

.msg_place_1st {
	margin-top: 15px;
}

Thanks,

10

Like that. Either float all bubbles and clear them, or use flex instead.

Of course that means altering the current code, as the current code is what it is and does what it does and will therefore need to change to do something different to what it currently does.

1 Like
11

You could probably do that by making sure each element clears the next.

e.g.

.msg_place, 
.msg_place_owner, 
.msg_place_1st,
.msg_place_wraper{
	clear:both;
}

Assuming I have understood the html structure correctly.:slight_smile:

12

If you have now decided that you want them on a new line then you can continue to use display:table; on your message divs.

Using your current html and css selectors these changes should plug in and work. This is based off of the example I showed in post #8.

It does not require any new wrapping divs and it does eliminate the .msg_place_wraper

It’s just an option that will work without extra markup

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat Room</title>
<style>
#chat_area {
  width: 87%;
  border: 1px solid gray;
  padding: 5px;
  border-radius: 5px;
  float: left;
  overflow: auto;
  height: calc(100vh - 280px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.msg_place, .msg_place_owner, .msg_place_1st {
  display: table;
  max-width: 65%;
  min-height: 35px;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: auto;
  padding: 5px;
  border: 1px solid gray;
  border-radius: 5px;
  /*position: relative;*/
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: #DAF7A6;
}
.msg_place_owner {
  margin-right: 10px;
  margin-left: auto;
  background-color: #BEE1F0;
}
.msg_place_1st {
  margin-top: 15px;
}
.avatar_place {
  float: left;
}
</style>

</head>
<body>

<div id="chat_area">

  <div class="msg_place_owner">
    <div class="avatar_place"><img src="http://www.anoox.com/ask_answer/tn_fotos/dummy.jpg" width="36" height="36"></div>
    <div class="text_place">
    <div class="user_nick">G_9901074</div>
      So we are developing a Node.js based Web Chat. Where the chat is offered in 2 Modes: Private &amp; Public. When in Private
      Chat mode the room owners message bubbles appear on the right side with their visitors
    </div>
  </div>
  <div class="msg_place">
    <div class="avatar_place"><img src="http://www.anoox.com/ask_answer/tn_fotos/dummy.jpg" width="36" height="36"></div>
    <div class="text_place"><div class="user_nick">G_9901074</div>
      So we are developing a Node.js based Web Chat. Where the chat is offered in 2 Modes: Private &amp; Public. When in Private
      Chat mode the room owners message bubbles appear on the right side with their visitors
    </div>
  </div>
  <div class="msg_place_owner">
    <div class="avatar_place"><img src="http://www.anoox.com/ask_answer/tn_fotos/dummy.jpg" width="36" height="36"></div>
    <div class="text_place">
    <div class="user_nick">G_9901074</div>
      So we are developing a Node.js based Web Chat. Where the chat is offered in 2 Modes: Private &amp; Public. When in Private
      Chat mode the room owners message bubbles appear on the right side with their visitors
    </div>
  </div>
  <div class="msg_place">
    <div class="avatar_place"><img src="http://www.anoox.com/ask_answer/tn_fotos/dummy.jpg" width="36" height="36"></div>
    <div class="text_place"><div class="user_nick">G_9901074</div>
      So we are developing a Node.js based Web Chat. Where the chat is offered in 2 Modes: Private &amp; Public. When in Private
      Chat mode the room owners message bubbles appear on the right side with their visitors
    </div>
  </div>

</div>

</body>
</html>
1 Like
13

Paul,

I applied your suggestion, and it works fine. Now messages by Guests and Room owners are each on separate line.
But a problem persists. That is messages posted by Guest on Mobile phoned are way too narrow. Although they are right width on regular screens (PC, Laptop, etc.) as you can see from this screen shot of an iPhone in private chat room as Guest.

750Ă—1334 147 KB

How do we fix this?

Thanks

14

Ray,

Your suggestion actually works real good in regard to the Text messages, as they appear correct both under Desktop and Mobile position and width wise. However, it is throwing the Avatar images out of wack as you can see in screen shot:

1920Ă—1080 114 KB

15

Are you talking about the owner avatar, missing on the right?

Do you have a link where the code is being used?

Dean, keep in mind that we don’t have access to the owner comments so we have been piecing it together with live edits in our browser dev tools.

EDIT:
I had disabled position:relative; in my code above so that would have misplaced the AP’d avatar.

I suspect this would be the problem…

.avatar_place_owner {
	float:	none;
    position:	absolute;
    right:	10px;
    top:	5px;
}

You should be able to float it right, opposite of what you did with guest avatars


.avatar_place  {
	float: left;
}
.avatar_place_owner {
	float:	right;
}

It is untested though as I mentioned I don’t have access

Just a reminder, as I posted above, the wrapper div that Paul set up is no longer needed with this code.

1 Like
17

That’s because you set them to be 65% of 65% wide and thus look too small on small s creens.

You could change the code to this.

.msg_place{max-width:100%}
@media screen and (max-width:640px){
.wrap{max-width:90%}
}

You may need to tweak as that is only pulled together from snippets as Ray mentioned.

However I think you should go with Ray’s method now that you want them on each line as the wrapper won’t be needed for that set up.

18

Paul,

So I went with your solution, since it requires less changes to the current CSS.
And it looks pretty good. Just one problem remains. As you can see on desktop messages from room owner and guests looks fine, but on Mobile Web the owner message has way too much blank space on right.
Now I modified its CSS from now, which is:

.text_place_owner {
padding-right: 50px;
padding-top: 5px;
}

to

.text_place_owner {
padding-right: 30px;
padding-top: 5px;
}

But then this Text runs over the Avatar image.
So it seems this Text is either too far to the right or running over Avatar image.
You have ideas how to fix this?

1920Ă—1080 132 KB
750Ă—1334 166 KB

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.