Designing a layout for a chat application that is structured from the bottom up

Question

Designing a layout for a chat application that is structured from the bottom up

I'm currently in the process of designing a web application for a chat platform. I have access to an API that provides a list of messages:

chatsite.com/api/thread/1/messages/

[
    {
        "id": 2,
        "sender": {
            "id": 2,
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f4f2e4f3f5f6ec1e6ece0e8edafe2eeec">[email protected]</a>"
        },
        "sent_datetime": "2017-09-06T17:31:30Z",
        "body": "user two sending a message in new thread (pk1)"
    },
    {
        "id": 1,
        "sender": {
            "id": 1,
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="433630263103242e222a2f6d202c2e">[email protected]</a>"
        },
        "sent_datetime": "2017-09-06T17:28:56Z",
        "body": "New thread test body"
    }
]

This is how the current HTML is structured:

<div id="Thread">
    <div id="Header"></div>
    <div id="MessageList">
        <div class="message">
            <p>{{message.body}}</p>
        </div>
        <div class="message">
            <p>{{message.body}}</p>
        </div>
        <div class="message">
            <p>{{message.body}}</p>
        </div>
    </div>
    <div id="Footer"></div>
</div>

Below is the related CSS styling:

#Thread {
    background-color: mediumseagreen;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: 600px;
}

#Header {
    height: 100px;
    background-color: blueviolet;
}

#MessageList {
    background-color: deepskyblue;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.message {
    background-color: white;
    padding: 8px;
    border: 1px solid #f9f9f9;
    font-size: 30px;
    margin: 4px;
}

#Footer {
    height: 100px;
    background: red;
}

Currently, the messages are displayed from top to bottom with the latest message at the top. However, I would like to reverse this order and display the messages from bottom to top:

__________________
|                |
|     HEADER     |
|________________|
|                |
| Latest Message |
|________________|
|                |
| 2nd Latest Message |
|________________|
|                |
|                |
|                |
|                |
|________________|
|                |
|     FOOTER     |
|________________|

To achieve this layout change, I plan on utilizing Vue.js as my frontend framework.

javascript html css vue.js flexbox

Answer 1

Answer №1

Simply update the code snippet from:

#MessageList {
    flex-direction: column;
}

to

#MessageList {
    flex-direction: column-reverse; /* this */
}

#Thread {
  background-color: mediumseagreen;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  height: 100vh;
}

#Header {
  height: 25px;
  background-color: blueviolet;
}

#MessageList {
  background-color: deepskyblue;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
}

.message {
  background-color: white;
  padding: 4px;
  border: 1px solid #f9f9f9;
  font-size: 1rem;
  margin: 4px;
}

#Footer {
  height: 100px;
  background: red;
}

<div id="Thread">
  <div id="Header"></div>
  <div id="MessageList">
    <div class="message">
      <p>Latest</p>
    </div>
    <div class="message">
      <p>Older</p>
    </div>
    <div class="message">
      <p>Oldest</p>
    </div>
  </div>
  <div id="Footer"></div>
</div>

Answer 2

Simply update the code snippet from:

#MessageList {
    flex-direction: column;
}

to

#MessageList {
    flex-direction: column-reverse; /* this */
}

#Thread {
  background-color: mediumseagreen;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  height: 100vh;
}

#Header {
  height: 25px;
  background-color: blueviolet;
}

#MessageList {
  background-color: deepskyblue;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
}

.message {
  background-color: white;
  padding: 4px;
  border: 1px solid #f9f9f9;
  font-size: 1rem;
  margin: 4px;
}

#Footer {
  height: 100px;
  background: red;
}

<div id="Thread">
  <div id="Header"></div>
  <div id="MessageList">
    <div class="message">
      <p>Latest</p>
    </div>
    <div class="message">
      <p>Older</p>
    </div>
    <div class="message">
      <p>Oldest</p>
    </div>
  </div>
  <div id="Footer"></div>
</div>

Answer 3

Answer №2

setInterval(function () {
  var main = document.querySelector('main');
  var div = document.createElement('div');
  div.textContent = Date();
  main.appendChild(div);
  main.scrollTop = main.scrollHeight; // This may increase the size, but the browser will manage it
}, 1000);

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 1 auto;
  overflow: auto;
  background: antiquewhite;
  display: flex;
  flex-direction: column;
}

main::before {
  content: "";
  flex: 1 0 0px;
}

<header>Header</header>
<main></main>
<footer>Footer</footer>

Answer 4

setInterval(function () {
  var main = document.querySelector('main');
  var div = document.createElement('div');
  div.textContent = Date();
  main.appendChild(div);
  main.scrollTop = main.scrollHeight; // This may increase the size, but the browser will manage it
}, 1000);

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 1 auto;
  overflow: auto;
  background: antiquewhite;
  display: flex;
  flex-direction: column;
}

main::before {
  content: "";
  flex: 1 0 0px;
}

<header>Header</header>
<main></main>
<footer>Footer</footer>

Answer 5

Answer №3

To ensure the last message stays at the bottom of the container, you can reverse the flow and scrollbar using the CSS properties:

flex-direction:column-reverse; transform:scale(1,-1);

An additional wrapper was added due to a bug where flex-direction:column + flex:1 + overflow:auto was not functioning as expected. This extra wrapper provides an efficient scrollbar for scrolling to older messages if needed, with the last one displayed at the bottom near the footer.

For example:

Click here for a CodePen demo

Answer 6

To ensure the last message stays at the bottom of the container, you can reverse the flow and scrollbar using the CSS properties:

flex-direction:column-reverse; transform:scale(1,-1);

An additional wrapper was added due to a bug where flex-direction:column + flex:1 + overflow:auto was not functioning as expected. This extra wrapper provides an efficient scrollbar for scrolling to older messages if needed, with the last one displayed at the bottom near the footer.

For example:

Click here for a CodePen demo

Designing a layout for a chat application that is structured from the bottom up

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble determining whether the Vue project is in debug or release mode in Visual Studio

How come my variable doesn't show up in the view even though I filled it in the controller?

Discover the magic of TransformToggle and slideToggle in Javascript, HTML, and CSS

"Null" is the value assigned to a JavaScript variable

Guide on how to use JavaScript to make an HTML5 input field mandatory

The vertical-align property in CSS seems to be malfunctioning

Assign the ngClick event handler to the capturing phase

Chrome mistakenly identifying octet-stream as a .png image

Using AngularJS to dynamically update the DOM with the response from a service method

guide on creating a simple line highchart using JSON data

Guide to programmatically configuring meta title, description, and image in a Vue.js project with the help of Vue Unhead and Vue Meta

The Ultimate Guide for Formatting JSON Data from Firebase

Utilizing X-editable and Parsley to trigger dual Ajax calls

Keep rolling the dice until you hit the target number

Different from SimplyScroll but with added functionalities

Creating a specific order for Arabic strings in HTML is simple and can be done by utilizing

Issue with React / Express failing to route links accurately

Steps for updating a text section beneath a carousel

Surround the image with horizontal links on each side

Numerous asynchronous requests