Align text with bottom as it comes in during a chat?

Question

I'm building a custom web chat application, and while I have the basics worked out, I've been wondering if this was possible... right now, the chat comes in at the top of the div, and when it reaches the bottom, the div starts scrolling. This works. This is great. But I was wondering if it was possible to create it more like an IRC client, where the chat comes in initially at the bottom of the div, then each new line comes in below the old ones, etc, and again, when the div is full, it starts scrolling.

I've managed to get part of this working: I can get it displaying this way. But I can't find a way to scroll it; either the scroll doesn't appear (when there's no overflow on the inner, text div, despite there being an overflow on the outer, container div), or it's confined to the width of the text rather than the width of the container div.

Some options I've tried:

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: auto; position: absolute; bottom: 0;"></div></div>

This has the text appear properly at the bottom, but no scrollbar ever appears.

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: scroll; position: absolute; bottom: 0;"></div></div>

This has the text appear properly at the bottom, and a scrollbar appears, but it's only ever as wide as the text, even if width=100%... and when the text reaches the top, the scrollbar remains gray.

Basically, do I want the scrollbar on the inner or the container div, is this even possible, how do I force it to work, and am I going about this entirely wrong?

Answer 1

The scroll-bars don't kick in because chatmessages just keeps getting taller.

Use these styles:

    #chatbox
    {
        overflow:   none;
        position:   relative;
        width:      100%;
        height:     400px;
    }
    #chatmessages
    {
        overflow:   auto;
        position:   absolute;
        bottom:     0;
        max-height: 400px;
    }

Answer 2

Use this jquery for scrolling to bottom, so it will always display the latest message:

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight);

For #chatmessages use width: 100% and max-height same as height of #chatbox

#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border:     1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width:      100%;
    max-height: 200px;
}

I created these fiddles with sample text messages:

jsfiddle with scroll

jsfiddle without scroll

Answer 3

I came up with a solution that doesn't require javascript, which means it works faster. When scrolling chat to bottom, there's just to many variables to watch out for, as an example images that are loading and alter the scroll height.

In my proposed solution the chat is rotated 180degrees in a scrollable wrapper. Inside the wrapper, you have another div that is rotated 180 degrees. This way the inner div floats naturally to bottom, also when new messages appear.

<div id="chat_wrap" class="scrollable" style="transform-origin: 50% 50%; transform: rotate(180deg);" onscroll="reverseScroll()">
   <div id="messages_wrap" style="float: left;width: 100%; transform: rotate(180deg);">
      <div class="message">Your message</div>
   </div>
</div>

Side note, my "chat_wrap" div has position absolute with top/bottom/left/right set to fit where it's supposed to.