Looking for ideas from CSS GODs on new chat UI

Hey all,

So we are developing a NodeJs based Chat to offer Web base chat free of any software or App to download.
The Key selling point of this chat is that it is 100% Web based whether on desktop or your Mobile phone.
Now we are not CSS great set aside CSS GODs :slight_smile:
So I would like to ask you to provide better CSS UI ideas that what we have come up with so far to get the Chat developed.
You can see people posting messages on left here:

and posting message on right here:

So if you can suggest CSS to make the UI much better than is now and the Mobile version as well, that would be great.
However, the CSS for the #chat_area DIV and #user_area DIVs are just fine, since they have been perfected after much work to scroll up as more messages and users arrive.

And FYI: the above access will not allow you to use some of the features since to use these features you need to be a member and I wanted to let you access the chat without needing to be member.

Much Thanks :slight_smile:

Hi,
After talking about the shrink to fit message divs in your other thread, I went ahead and took my previous example a little further along.

I was able to use flexbox instead of floats or display table to make the divs shrink to content width and keep them at your max-width.

As far as a mobile version, I think your sidebar (users in room) really needs to be re positioned. There just won’t be enough room for it beside the messages. I envision it going to the top of the page so your messages can continue to auto scroll into view. Your going to run out of space real quick and the most important elements need to be in view. The fixed footer will be necessary for your text input and send button. You can save some space by making your sound controls a pop-up panel.

Here is what I came up with as a concept layout. It’s still a little rough but I have the textarea submitting messages now with the help of a little JS.

chat-room-2.html (7.8 KB)

1 Like

Hi ray,

Sorry, for late reply. Had forgot this question as no one had replied for a while/
So I have actually implemented most of these issues.

But one lil tricky issues remains, that is the clearance between chat_con which contains the chat_area and user_area and the fixed top and fixed bottom is not that responsive. That is it is showing different clearances for different browsers and even more inconsistent so on Mobile phone browsers. I am using: height: calc(100vh - 280px);
type things, but does not seem to be working!

What suggestion do you have to give same consistent 10 pixel clearance between chat_con and fixed Top and Bottom?

Thanks,

Hey all,

We are doing a Node.js based 100% Web browser based chat.
And I am having difficulty getting consistent clearance between chat_con which contains the chat_area and user_area and the fixed top and fixed bottom. That is browsers are showing different clearances and even more inconsistent so on Mobile phone browsers. I am using: height: calc(100vh - xyz) to determine the Vertical view that would be available to a users browser on any device, but again this is producing inconsistent across diff browsers.

You can see the chat room here:

& for chat room owner:

What suggestion do you have to give same consistent 10 pixel clearance between chat_con and fixed Top and fixed Bottom?

PS., above Chat access is a sort of hack access to the chat so some features will not be working since normal access is via being an Anoox member only. And I wanted to give you all non-member access so you can check it out quick.

Thanks,

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