How to align a div to bottom?

Question

I am trying to create a chat webpage using Python Flask as a backend. I want to align messages that are received and sent recently to be aligned in the bottom and when new ones arrive that msg should move up and new ones should be placed in that place. How to do that? I have read similar questions but couldn't understand how to implement it for my needs.

My chat page structure is as follows

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="{{ url_for('static', filename = 'static/css/jquery/jquery.js') } } ">\\x3C/script>') </script> <script type=text/javascript> $SCRIPT_ROOT = { { request.script_root | tojson | safe } }; $(function() { $('#send_btn').bind('click', function() { $.getJSON($SCRIPT_ROOT + '/serve_msg', { msg: $('input[name="msg"]').val(), }, function(data) { var msg = document.createElement('div'); msg.className = 'msg'; msg.innerHTML = '<img src="" alt="You"><p id="send_msg"> document.getElementById("msg").value </p><span class="time-left">11:00</span>'; document.getElementById('msg_box').appendChild(msg); $('#send_msg').text($('input[name="msg"]').val()) $("#reply").text(data.reply); }); return false; }); }); </script> <!--<link rel="stylesheet" href="webi/templates/style.css">--> <style type="text/css"> body { background-color: #2a4982; } .container { border: 2px solid #dedede; background-color: #555555; border-radius: 5px; align-self: center; padding-bottom: 3%; margin-top: 4%; margin-left: 16%; margin-right: 10%; } .chatbox { border: 2px solid #dedede; background-color: #cac6f1; border-radius: 5px; align-self: center; padding-bottom: 6%; margin-left: 15%; margin-right: 15%; } .main_heading { font-weight: bolder; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 30px; color: #2981bc; -webkit-text-stroke: 1px cornsilk; padding-top: -8%; padding-bottom: -8%; } .text_input_area { margin-top: 1%; margin-bottom: -1%; } .msg_box { position: relative; background: rgb(22, 29, 34); /*padding-bottom: 50%;*/ height: 450px; width: 770px; overflow: scroll; } .msg_input { width: 85%; padding-bottom: 3%; } .msg_sent {} .msg_recieved {} /* Style time text */ .time-right { float: right; color: #aaa; } /* Style time text */ .time-left { float: left; color: #999; } .msg { position: relative; ; border: 2px solid #dedede; background-color: #f1f1f1; border-radius: 5px; height: 40px; width: fit-content; margin: 15px 0; bottom: 0px; } /* Darker chat container */ .msg_recieved { border-color: #ccc; background-color: #ddd; } /* Clear floats */ .container::after { content: ""; clear: both; display: table; } /* Style images */ .container img { float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; } /* Style the right image */ .container img.right { float: right; margin-left: 20px; margin-right: 0; } </style> <title>AVE - WEB INTERFACE</title> </head> <body> <div class="container" align="center"> <p class="main_heading"> AVE - AI Virtual Entity</p> <div class="chatbox"> chatbox <div class="msg_box"> <div class="msg msg_recieved"> <img src="" alt="Ave"> <p id="reply">Hello. How are you today?</p> <span class="time-right">11:00</span> </div> </div> <div class="input-group mb-3"> <input type="text" name="msg" id="msg" class="form-control" placeholder="Type your message here!" aria-label="input_area" aria-describedby="send_btn"> <div class="input-group-append"> <button class="btn btn-primary" type="button" id="send_btn" onclick="display_send_msg">Send</button> </div> </div> </div> </div> </body> </html>

Sorry for the bad code! I am new to this whole idea. There may be lots of errors. Sorry for that

Answer 1

The best thing would be to just normally append new message to the messages div and use JavaScript/jQuery to scroll to bottom of that div.

jQuery:

$('.messages').scrollTop($('.messages').height())

Answer 2

Let say you have a basic markup structure like

<main id="msgs">
   <div>Message #0</div>
   <div>Message #1</div>
   <div>Message #2</div>
   <div>Message #3</div>
   <div>Message #4</div>
   <!-- new messages are appended here -->
</main>

Using Flexbox you could place them in reverse order so every new message is visible on top of the page

main {
   display: flex;
   flex-flow: column-reverse nowrap;
}

Then via Javascript, once you appended the new message you need to scroll the main element via scrollTo(0, 0); The scroll could even be improved via CSS with scroll-behavior: smooth;

Here below a snippet that simulates a new message every 5s :

 var messageArea = document.getElementById('msgs'); messageArea.scrollTo(0, 0); setInterval(() => { /* create a new message element */ var msgEl = document.createElement('div'); /* create a string with the message */ var msgText = 'Message #' + messageArea.children.length; /* set the textContent of the element with the message */ msgEl.textContent = msgText; /* append the new message in the container of the messages */ messageArea.appendChild(msgEl); /* finally scroll the message area to (0, 0) coords. */ messageArea.scrollTo(0, 0); }, 5000)

 main { height: 100vh; display: flex; overflow: auto; padding: 1em .5em; flex-flow: column-reverse nowrap; scroll-behavior: smooth; } div { border: 1px #ccc solid; border-radius: 10px; padding: 1em; margin-top: 1.5em; width:60%; align-self: flex-start; } div:nth-child(2n) { align-self: flex-end; }

 <main id="msgs"> <div>Message #0</div> <div>Message #1</div> <div>Message #2</div> <div>Message #3</div> <div>Message #4</div> </main>

How to align a div to bottom?

Question

2 answers

solution1
0 2020-03-25 07:44:33

solution2
0 ACCPTED 2020-03-25 08:06:02

How to align a div to bottom?

Question

2 answers

solution1 0 2020-03-25 07:44:33

solution2 0 ACCPTED 2020-03-25 08:06:02

solution1
0 2020-03-25 07:44:33

solution2
0 ACCPTED 2020-03-25 08:06:02