Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

How Do I Make New Messages Appear On Left/right Depending On Who Sent Them? (no Float)

Post a Comment
I'm trying to make a webpage where, depending on whether user 1(left textarea) or user 2(right textarea) sends a message, the message in the yellow conversation window appears on l

Solution 1:

You could achieve this by setting display: block to both .message and .message2, and adding margin-left: auto to .message2.

I would also adjust the max-width to about 48%.

You can move some css properties from the div to the label. This will allow the width of the text to determine the width of the background-color.

fiddle

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 {
  max-width: 48%;
  margin: 2px;
  position: relative;
  top: 2%;
  display: block;
}

.message2 {
  margin-left: auto;
  text-align: right;
}

.messagelabel,
.message2label {
  display: inline-block;
  border-radius: 10px;
  padding: 5px;
    word-wrap: break-word;
  color: white;
  background-color: DodgerBlue;
}

.message2label {
  background-color: purple;
}


/*23*/
<linktype="text/css"href="style.css" /><scriptsrc="script.js"></script><body><divid="conversation"><divclass="message"><label>On insensible possession!</label></div><br /><divclass="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. 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><divclass="message2"><label>On insensible</label></div><divclass="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><divclass="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><divclass="parent"><divclass="user"><inputid="text"type="textarea" /><inputid="btn"type="button"value="Send"onclick="Send(this)"></div><divclass="user2"><inputid="btn2"type="button"value="Send"onclick="Send(this)"><inputid="text2"type="textarea" /></div></div></body>

Solution 2:

You could just use flex and row wrapper. Each message could have a display: flex; row and then messages set to respectively align-self: flex-start; and align-self: flex-end;. I have edited your snippet to reflect it.

functionSend(ele) {
  var foo = document.getElementById("conversation");
  var rowWrapper = document.createElement('div');
  rowWrapper.className = 'message-row';
  var para = document.createElement("label");
  var txt;
  if (ele.id == "btn") {
    txt = document.getElementById("text");
    var node = document.createTextNode(txt.value);
    para.appendChild(node);
    para.className = 'message';
    rowWrapper.appendChild(para);
    var element = document.getElementById("conversation");
    element.appendChild(rowWrapper);
  } else {
    txt = document.getElementById("text2");
    var node = document.createTextNode(txt.value);
    para.appendChild(node);
    para.className = 'message2';
    rowWrapper.appendChild(para);
    var element = document.getElementById("conversation");
    element.appendChild(rowWrapper);
  }
}
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-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.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%;
}

.message {
    align-self: flex-start;
}

.message2 {
  align-self: flex-end;
  background-color: purple;
  text-align: right;
}


/*23*/
<divid="conversation"><divclass="message-row"><divclass="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></div><divclass="message-row"><divclass="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><divclass="parent"><divclass="user"><inputid="text"type="textarea" /><inputid="btn"type="button"value="Send"onclick="Send(this)"></div><divclass="user2"><inputid="btn2"type="button"value="Send"onclick="Send(this)"><inputid="text2"type="textarea" /></div></div>

Solution 3:

Depending on your if clause where you check from which button it has been send I would add a position to the TextNode.

You can add CSS Style via Javascript like this:

document.getElementById("myTextNode").style.left = "5px;";

You have to add an ID to the TextNode obviously and based on your code I'm sure you know how to do via Javascript :). Just in case:

node.id = "someID";

Post a Comment for "How Do I Make New Messages Appear On Left/right Depending On Who Sent Them? (no Float)"