I am currently working on a webpage where I want the messages sent by different users to appear in a yellow conversation window based on who sent them - user 1 or user 2. I want it to mimic the messaging layout commonly seen on phones, distinguishing between the two users with lighter blue and purple background colors. I am trying to achieve this without using float, so any suggestions other than that would be appreciated. Below is the code snippet:
function Send(ele) {
var br = document.createElement("br");
var foo = document.getElementById("conversation");
foo.appendChild(br);
var para = document.createElement("label");
var txt;
if (ele.id == "btn") {
txt = document.getElementById("text");
var node = document.createTextNode(txt.value);
para.appendChild(node);
var element = document.getElementById("conversation");
para.className = 'message';
element.appendChild(para);
} else {
txt = document.getElementById("text2");
var node = document.createTextNode(txt.value);
para.appendChild(node);
var element = document.getElementById("conversation");
para.className = 'message2';
element.appendChild(para);
}
}body {
margin: 5% 10% 0% 10%;
background-color: azure;
}
#conversation {
width: 100%;
height: 80%;
background-color: yellow;
}
.parent {
white-space: nowrap;
text-align: center,
}
.user {
display: inline-block;
width: 50%;
}
.user2 {
display: inline-block;
text-align: right;
width: 50%;
}
.message,
.message2 {
display: inline-block;
width: auto;
height: auto;
max-width: 50%;
word-wrap: break-word;
color: white;
background-color: DodgerBlue;
border-radius: 10px;
padding: 5px;
margin: 2px;
position: relative;
top: 2%;
}
.message2 {
background-color: purple;
text-align: right;
}
/*23*/<div id="conversation">
<div class="message">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
<br />
<div class="message2">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
</div>
<div class="parent">
<div class="user">
<input id="text" type="textarea" />
<input id="btn" type="button" value="Send" onclick="Send(this)">
</div>
<div class="user2">
<input id="btn2" type="button" value="Send" onclick="Send(this)">
<input id="text2" type="textarea" />
</div>
</div>I have also shared the code on jsfiddle for your reference:
https://jsfiddle.net/pbzqw278/
If you could explain the changes made, especially in CSS, it would be greatly helpful as I am still learning about it.