I am currently working on a messaging application and I want the layout to be similar to Twitter or Whatsapp. Specifically, I want the messages from the person the user is chatting with to appear on the left side, while the user's own messages should be on the right side.
Below is the React JSX markup that I have so far:
<div
style={{
overflow: "auto",
display:"flex",
flexDirection:"column",
}}
>
{chatMessageInfo[currentChatID].map((e, idx) => (
<>
{e.data.sender === ourRef ? (
<div className="ourMessage">
<p>{e.data.msg.text}</p>
</div>
) : (
<div className="theirMessage">
<p>{e.data.msg.text}</p>
</div>
)}
</>
))}
</div>
Here is the corresponding CSS:
.ourMessage {
display: flex;
border-radius: 0px;
margin-top: 0px;
margin-bottom: 0px;
max-width: 300px;
background: rgb(29 155 240);
border-radius: 25px;
padding-left: 10px;
padding-right: 10px;
margin-left: 500px;
text-align: right;
float: right;
zoom: 1;
}
.theirMessage {
display: flex;
border-radius: 0px;
margin-top: 0px;
margin-bottom: 0px;
max-width: 300px;
background: rgb(150, 150, 150);
border-radius: 25px;
padding-left: 10px;
padding-right: 10px;
text-align: left;
float: left;
zoom: 1;
}
Currently, everything works well in terms of alignment using floats. However, when I add display:"flex" to the parent div, all the message divs somehow end up with the same width.
https://i.sstatic.net/BFHx6.png
If anyone has any suggestions on how to resolve this issue, please share them. Just for context, I am developing this project using NextJS as a metaframework alongside React.