Can't align latest messages to the bottom

Question

I have to create an IRC-like web chat (latest messages have to appear at the bottom of the parent container).

Here's my (unsuccessful) attempt:

.inner-conversation-container {
    height: 100px;
    position: relative;
    overflow: hidden;
    width: 500px;
}


.conversation-stream-container {
    max-height: 100px;
    position: absolute;
    bottom: 0;
    overflow: auto;
    width: 100%;
}

<div class='inner-conversation-container'>
    <div class='conversation-stream-container'>
        <div class='conversation-item'>
            <div class='conversation-message-part' msg-id='137'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='138'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='139'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='140'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='141'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='142'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='143'>
                <div class='center-part'>Content</div>
            </div>
            <div class='conversation-message-part' msg-id='144'>
                <div class='center-part'>The latest message that needs to be in the bottom</div>
            </div>
        </div>
    </div>
</div>

The div with msg-id="144" needs to be visible and aligned to the bottom.

Check: [link](http://stackoverflow.com/questions/10503606/scroll-to-bottom-of-div-on-page-load-jquery) — GreyRoofPigeon, Jun 26 '13 at 14:25
The link given by @LinkinTED has your solution. You probably want to have the scollbar to default to the bottom position instead of the top. You need a JavaScript/jQuery aided solution. — Marc Audet, Jun 26 '13 at 14:29
No, CSS alone will not allow you to control the position of the scroll bar. — Marc Audet, Jun 26 '13 at 14:56
if u go with jquery it is possible.otherwise it wont possible. basically if u add messages in the container , it will increase ur container height automatically so u need to reset to bottom.. and also another one suggestion for chat is when u are adding new message scroll comes under bottom but at the time of user checking previous messages scroll wont go to bottom.it should be same where u r. — gauti, Jun 26 '13 at 15:17

score 1 · Accepted Answer · answered Jun 26 '13 at 14:58

jQuery aided solution

Using your HTML mark-up:

<div class='inner-conversation-container'>
    <div class='conversation-stream-container'>
        <!-- A single item -->
        <div class='conversation-item'>
            <!-- Message parts -->
            <div class='conversation-message-part' msg-id='125'>
                <div class='center-part'>test 9</div>
            </div>

            ...

            <div class='conversation-message-part' msg-id='143'>
                <div class='center-part'>no, it&#x27;s not</div>
            </div>
            <div class='conversation-message-part' msg-id='144'>
                <div class='center-part'>latest needs to be in the bottom</div>
            </div>
        </div>
    </div>
</div>

you can simplify your CSS as follows:

.inner-conversation-container {
    height: 200px;
    width: 500px;
    border: 2px solid lightgray; /* for demo only */
    overflow: auto;
}
.conversation-stream-container {
    background-color: yellow; /* for demo only */
}

and set the scroll bar position using jQuery:

$('.inner-conversation-container').scrollTop(
   $('.inner-conversation-container')[0].scrollHeight
);

Demo fiddle: http://jsfiddle.net/audetwebdesign/FW6Y5/

why do you wrap items into one conversation-item? – Marian Klühspies Apr 20 '14 at 12:34 — Marian Klühspies, Apr 20 '14 at 12:34

Can't align latest messages to the bottom

1 Answers1

jQuery aided solution