Trouble achieving desired layout for chat messages in the page

Question

0.00/5 (No votes)

See more:

I'm currently working on a chat interface and I'm facing an issue with displaying the chat messages. Currently, the chat messages are appearing in a single line as shown in this image:

The screenshot of my page

However I want it to be in a seperate line like one chat message in next line and one message at a time like there is a chat message in left and a message in right in next line then it continues. Something like this

Code of my page
HTML

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <div class="chat-container">
      <div class="chthdr">
        <h3>Chatkura</h3>
      </div>

      <div class="chtbd">
        <div class="chtmsg">
          <div class="chtmsg-content">Hello! How can I help you today
          </div>
          <br/>
          <div class="cht-tis">
            <img class="usrpn" src="R.png" alt="user icon"> <div class="chtusr">
              hello
          </div>
          <img class="usrpn" src="icon.png" alt="user icon"> <div class="chtusr">
            hello
        </div> 
          </div>
          <div class="cht-btreps">
            <img src="icon.png" alt="bot icon"> <div class="chtmsg-reps">
              hi
              </div>
              <img src="icon.png" alt="icon"> <div class="chtmsg-reps">
                hi
              </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

CSS

*{
    margin: 0;
    padding: 0;
}

body{
  overflow-y: auto;
  overflow-x: hidden;
}

.chat-container {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #1f7c22;
    border-radius: 10px;
    box-shadow: 20px 38px 40px rgba(0, 0, 0, 0.4);
    width: 60%;
    height:100%;
    margin: 15px auto;
    font-family: Arial, sans-serif;
  }
  
  .chthdr {
    text-align: center;
    background-color: #36bbb033;
    border-radius: 8px 8px 0 0;
    padding: 15px;
    border-bottom: 2px solid #dddddd;
  }
  
  .chtbd {
    display: flex;
    flex-direction: column;
    padding: 15px;
    height: 30vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  .chtmsg{
    margin-bottom: 10px;
  }

  .usrpn{
    width: 27px;
    border-radius: 14px;
    border: 2px solid #ffffff;
  }
  img{
    width: 30px;
    margin-right: 5px;
    height: fit-content;
  }
  .chturs{
    display: flex;
    justify-content: right;
    margin-bottom: 10px;
  }
  .chtmsg-content {
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    width: max-content;
    padding: 11px;
    box-shadow: 10px 4px 31px rgba(0, 0, 0, 0.4);
    display: inline-block;
  }
  .cht-tis{
    display: flex;
    justify-content: right;
  }

  .msgsp{
    font-size: 18px;
    max-width: 50%;
    word-wrap: break-word;
  }
  .chtusr{
    background-color: #23a875;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 10px 0px 12px rgba(0, 0, 0, 0.4);
    max-width: 70%;
    margin-bottom: 17px;
    align-self: flex-start;
  }

  .cht-btreps{
    display: flex;
    justify-content: left;
  }

  .chtmsg-reps{
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: #c2c2c2;
    border-radius: 9px;
    padding: 10px;
    box-shadow: 10px 4px 30px rgba(0, 0, 0, 0.4);
    display: inline-block;
    max-width: 75%;
    margin-bottom: 15px;
  }

Any help would be greatly appreciated. THANKS IN ADVANCE !! and THANK YOU FOR READING

What I have tried:

I have tried adding display: block to the .chtmsg-content class and adjusting the adjusting the CSS properties for the chat messages CSS properties for the chat messages but it didn't work.

Posted 7-Apr-23 6:51am

Nischal Shar

Updated 10-Apr-23 23:09pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2023-04-10T23:09:00

You need to change the structure of your HTML so that each message and icon is wrapped in its own container, and both messages and replies are within the same container:

HTML

<div class="chat-container">
    <div class="chthdr">
        <h3>Chatkura</h3>
    </div>

    <div class="chtbd">
        <div class="chtmsg-content">Hello! How can I help you today</div>
        <div class="msg cht-tis">
            <img class="usrpn" src="R.png" alt="user icon">
            <div class="chtusr">
                hello
            </div>
        </div>
        <div class="msg cht-tis">
            <img class="usrpn" src="icon.png" alt="user icon">
            <div class="chtusr">
                hello
            </div>
        </div>
        <div class="msg cht-btreps">
            <img src="icon.png" alt="bot icon">
            <div class="chtmsg-reps">
                hi
            </div>
        </div>
        <div class="msg cht-btreps">
            <img src="icon.png" alt="bot icon">
            <div class="chtmsg-reps">
                hi
            </div>
        </div>
    </div>
</div>

Then update your CSS:

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-container {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #1f7c22;
    border-radius: 10px;
    box-shadow: 20px 38px 40px rgba(0, 0, 0, 0.4);
    width: 60%;
    height: 100%;
    margin: 15px auto;
    font-family: Arial, sans-serif;
}

.chthdr {
    text-align: center;
    background-color: #36bbb033;
    border-radius: 8px 8px 0 0;
    padding: 15px;
    border-bottom: 2px solid #dddddd;
}

.chtbd {
    display: flex;
    flex-direction: column;
	gap: 5px;
    padding: 15px;
    height: 30vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.chtmsg-content {
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    width: max-content;
    padding: 11px;
    box-shadow: 10px 4px 31px rgba(0, 0, 0, 0.4);
    display: inline-block;
}

img {
    width: 30px;
    margin-right: 5px;
    height: fit-content;
}

.usrpn {
    width: 27px;
    border-radius: 14px;
    border: 2px solid #ffffff;
}

.msg {
	display: flex;
	gap: 5px;
}
.cht-tis {
	justify-content: right;
}

.chtusr {
    background-color: #23a875;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 10px 0px 12px rgba(0, 0, 0, 0.4);
    max-width: 70%;
    align-self: flex-start;
}

.chtmsg-reps {
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: #c2c2c2;
    border-radius: 9px;
    padding: 10px;
    box-shadow: 10px 4px 30px rgba(0, 0, 0, 0.4);
    display: inline-block;
    max-width: 75%;
}

Demo[^]