How to make a DIV expand width wise on right & left to Max width

HTML & CSS
1

Hey all,

We are developing a Node.js based Web chat and we want to have the Text message bubbles have a Width that expands and shrinks to the width of the actual message plus 5px for padding but for these DIVs to have max width that is 65%. Very much like how messages display on your iPhone.

Also these DIVs can be posted on left of screen and right of screen depending if you are the owner of the chat room. And for this solution to be Mobile friendly too so that people can chat on their iPhone as they can on their desktop via this Ch at service.

You can see what we have right now here for left chat display:
http://www.sitesticky.com/chat.php?public=guest

and for right chat display here:
http://www.sitesticky.com/chat.php?public=guest&own=y

As you can see right now chat messages have a fixed width.

What CSS would take care off this?

Thanks,

P.S. The access to the Chat via above URLs is a hack to give you access to the chat so you may not be able to use all features of the chat that members accessing it right would, please ignore that.

2

If you want to shrink wrap the div to the content then display:table; will do that for you.

 .msg_place, .msg_place_owner {
	border: 1px solid gray;
	padding: 5px;
	border-radius: 5px;
	margin-top: 3px;
	margin-left: 1%;
	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;
}

489×375 29.6 KB

1 Like
3

To get the left / right posts I would maybe use floats because they too shrink width to fit content and by nature sit on either the left of right side.
But they do come with the added complication of requiring to be cleared, I fix that by giving each post an extra wrapper with a clearfix.

Then I just add an extra .owner class to the owner’s posts to change from the default left float to right.

4

Hello Ray,

Your suggestion works as far as the messages by guests to the chat room, that is messages posted to left via DIV
.msg_place
However msgs posted on right side via DIV
.msg_place_owner

are not set on the right side and are instead floating on the middle of the scrren as you can see from this screen shot

http://www.sitesticky.com/images/flex_msg_fornat_not_working_on_right.jpg

How to fix that?

Thanks,

5

Seems like a float: right
took care of that right side placement!
Still have problems with messages running over member Avatar images. Working on that.

6

Hi,

Problems remain as you can see from enclosed screen shot. That is once we get to the bottom of the page. Keep in mind to make the messages scroll up, we use this CSS code to append the messages:

var chatArea = document.getElementById("chat_area");
chatArea.scrollTop = messagesContainer.scrollHeight;

1920×1080 293 KB

7

Yes floats will work too as Sam has pointed out.

Please remove the left margin and just use clear:right; to drop the shorter posts down to a new line. The left margin will cause problems for mobiles.

.msg_place_owner {
    /*margin-left: 38%; remove this*/
    background-color: #BEE1F0;
    float: right;
    margin-right: 1%;
    clear: right; /*add this*/
}

I think that will work, however I can’t seem to test it with user comments on the left too. Your links are for left posts, and right posts in separate pages.

It looks like you fixed that with right padding, that’s what I would have suggested.

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

Just to let you know, you have more problems then you may be aware of.

Your page starts to break apart when the viewport gets below 1000px. At 1000px the absolute positioned “Sound” buttton starts laying on top of your “Send” button.

Things get worse from there as the users in room (right) column starts to drop.

580px Firefox Desktop

581×150 5.01 KB

330px Firefox Responsive mode view

329×484 9.63 KB

The flexbox layout that we showed you in your other thread resolved a lot of those problems.

9

Hi Ray,

I applied that idea. That is: clear: right; /add this/
Checking still to see if it works all Ok.

10

Yes, I know the Mobile version of the CSS code for this is not done yet.
I am working crazy on the core code of this chat service and to integrate it into the site.

Do you have the CSS code for making the chat UI Mobile friendly?
That would be highly appreciated :slight_smile:

11

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