Can It Flexbox? Chat Window with Input at the Bottom, Chats Scrolling Up

Can it flexbox? Chat window with input at the bottom, chats scrolling up

I can't get #chatBar to "squeeze" #chatList without setting a height.
Which is what I was trying to avoid by using flexbox

You had the flex-basis set to auto for all elements. Without explicit height, the flex model will automatically try to accommodate everything inside the available space by shrinking or expanding the elements. This is why you are unable to get the #chatList to work as intended. The div itself as well as the individual chats all expand or shrink within the available space.

What you should do is to start simple:

#chatBar {
    height: 100%; overflow: hidden;
    display: flex; flex-flow: column;
}
#chatList {
    /* grow or shrink as required from flex-basis height of 20% */
    flex: 1 1 20%; 
    display: flex; flex-direction: column; 
    overflow: auto;
} 

/* do not grow or shrink with a flex-basis height of 80% */
#chatBarInput { flex: 0 0 80%; }

And you will be able to see it working. You could then take it further from here.

Your modified codepen: http://codepen.io/Abhitalks/pen/ZbjNvQ/

---

Goals:

1. textarea (for typeing in messages) stays at the bottom the whole time.
2. chats start at the bottom, then scroll up as needed.
3. If you use the "Google Hangouts", like the message app in that.

The trick would be to use flex-direction: column-reverse and prepend the new messages to the container instead of appending those.

I took an old answer of mine and changed the layout to flex-model for a demo of this purpose. You can peruse the code to see how it's done.

Demo Fiddle: http://jsfiddle.net/abhitalks/khj4903t/

Demo Snippet:

var btn  = document.getElementById('btn'),     inp  = document.getElementById('inp'),     chats = document.getElementById('chatWindow');btn.addEventListener('click', postMsg);
inp.addEventListener('keyup', function(e) { if (e.keyCode == 13) { postMsg(); }});
function postMsg() { var msg  = inp.value,        bubble  = document.createElement('div'),        p   = document.createElement('p');    if (msg.trim().length <= 0) { return; }    bubble.classList.add('bubble');    bubble.classList.add('right');    p.textContent = msg;    bubble.appendChild(p);    inp.value = '';    chats.insertBefore(bubble, chats.firstChild);}

* { box-sizing: border-box; margin: 0; padding: 0; }html, body { height: 100%; overflow: hidden; }.wrap {     margin: 8px; height: 90%; width: 50%;     display: flex; flex-direction: column;}.container {    flex: 1 1 90%; display: flex; flex-direction: column;     background-color: #eee; border: 1px solid #ccc; overflow: auto;}.form { flex: 0 0 32px; display: flex; border: 1px solid #ddd; }.form > input[type=text] { flex: 1 1 auto; border: 1px solid #eee; }.form > input[type=button] { flex: 0 0 20%; border: 1px solid #eee; }.bubble { flex: 1 1 auto; clear: both; } /* clear the floats here on parent */.bubble p {    border-radius: 5px;    padding: 8px; margin: 8px 12px;    max-width: 80%;  /* this will make it not exceed 80% and then wrap */    position: relative; transition: background-color 0.5s; }.left p { background-color: #ccc; float: left; } /* floated left */.right p { background-color: #33c; color: #fff; float: right; } /* floated right *//* classes below are only for arrows, not relevant */.left p::before {    content: ''; position: absolute;    width: 0; height: 0; left: -8px; top: 8px;    border-top: 4px solid transparent;    border-right: 8px solid #ccc;    border-bottom: 4px solid transparent;}.right p::after {    content: ''; position: absolute;    width: 0; height: 0; right: -8px; bottom: 8px;    border-top: 4px solid transparent;    border-left: 8px solid #33c;    border-bottom: 4px solid transparent;}

<div class="wrap">    <div id="chatWindow" class="container">        <div class="bubble left"><p>msg</p></div>        <div class="bubble left"><p>long message</p></div>        <div class="bubble right"><p>ultra long message which can wrap at eighty percent </p></div>        <div class="bubble left"><p>lorem ipsum</p></div>        <div class="bubble right"><p>very long message</p></div>            <div class="bubble right"><p>one more message</p></div>            <div class="bubble left"><p>lorem ipsum</p></div>        <div class="bubble right"><p>another message</p></div>            <div class="bubble left"><p>lorem ipsum</p></div>        <div class="bubble right"><p>yet another message</p></div>            <div class="bubble left"><p>lorem ipsum</p></div>    </div>    <div id="inputWindow" class="form">        <input id="inp" type="text" />        <input id="btn" type="button" value="Send" />    </div></div>

How modify css for chat application layout especially fixed footer part

I quickly added a couple lines of css

Here's a jsfiddle: https://jsfiddle.net/6dchq2zq/7/

 .navbar {
    position: fixed;
    width: 100%;
 }

 .chat-footer {
    background-color: #dfeeff;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
 }

 .chat-box {
   height: 100%;
   overflow: auto;
   overflow-x: hidden;
   padding: 60px 0;
 }

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

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;
    }

Chat scroll to bottom when send a message using React

You can simply use an effect with itemsChat as dependency. Just grab the chat ul element and scroll to the bottom.

useEffect(() => {
    document.querySelector('.ui-chat').scrollTop = document.querySelector('.ui-chat').scrollHeight
  }, [itemsChat])

Working copy of your code is here

Absolute div inside flexbox div behaving like fixed

set position: relative for parent (#chat-page-main-container)

---

Related Topics