CODEWITHSUNDEEP
javascripthtmlcss
Amrit Gupta
Amrit Gupta

Reputation: 39

Some issues with chat box design

I am working on a chat application and I have two major issues in chatbox design.

  1. I want some part of the screen scrollable just like other chatting applications when we have more messages we scroll up to see previous messages and other things are fixed on the screen like: sendbar,top-menu-bar, etc. but I unable to do so, I tried overflow-y = scroll but it didn't work.

  2. As I mentioned in the first point some things have to be fixed on the screen but after setting position = fixed it also doesn't work.

I tried everything please help.

function fxn(){
 
  var text = document.getElementById("inp").value
  var ele = document.getElementById("parent")
  var foo = document.createElement("div")

  foo.innerHTML = "<div class = box1>" + text + "</div><br><br><br>";
  ele.appendChild(foo)
 
}
#box {
  margin-bottom: 10px;
  background-color: aqua;
  width: 300px;
  border: solid 2px black;
}

.box1 {
  display: inline;
  padding: 10px;
  border-radius: 15px;
  width: 300px;
  border: solid 2px black;
}

.out{
  position: fixed;
  width: 100%;
  background-color: aquamarine;
}
<body id="bd">
  <div id ="box">
    Testing chat box
  </div>
  <div id="parent"></div>
  <div class="out">
    <input type="text" id="inp">
  <button onclick="fxn()">Send</button>
  </div>
</body>

Output enter image description here

Upvotes: 1

Views: 117

Answers (3)

Anand
Anand

Reputation: 408

I see that the post has been accepted and it works nicely for the OP. But I would still like to present one more option. I just made CSS changes to make the footer fixed and header sticky so as to mimic your requirement.

function fxn(){
 
  var text = document.getElementById("inp").value
  var ele = document.getElementById("parent")
  var foo = document.createElement("div")

  foo.innerHTML = "<div class = box1>" + text + "</div><br><br><br>";
  ele.appendChild(foo)
 
}
#box {
  margin-bottom: 10px;
  background-color: aqua;
  width: 300px;
  border: solid 2px black;
  position: sticky;
  top:0;
}

.box1 {
  display: inline;
  padding: 10px;
  border-radius: 15px;
  width: 300px;
  border: solid 2px black;
}

.out{
  position: fixed;
  width: 100%;
  background-color: aquamarine;
  left: 0;
  bottom: 0;
}
<body id="bd">
  <div id ="box">
    Testing chat box
  </div>
  <div id="parent"></div>
  <div class="out">
    <input type="text" id="inp">
  <button onclick="fxn()">Send</button>
  </div>
</body>

Upvotes: 3

CodeBug
CodeBug

Reputation: 1667

function fxn(){
  var text = document.getElementById("inp").value
  var ele = document.getElementById("parent")
  var foo = document.createElement("div")

  foo.innerHTML = "<div class = box1>" + text + "</div><br><br><br>";
  ele.appendChild(foo)
 ele.scrollTop = ele.scrollHeight;
}
#parent{
  height:100px;
  overflow-y:scroll;
}
#box {
  margin-bottom: 10px;
  background-color: aqua;
  width: 300px;
  border: solid 2px black;
}

.box1 {
  display: inline;
  padding: 10px;
  border-radius: 15px;
  width: 300px;
  border: solid 2px black;
}

.out{
  position: fixed;
  width: 100%;
  background-color: aquamarine;
}
<body id="bd">
  <div id ="box">
    Testing chat box
  </div>
  <div id="parent"></div>
  <div class="out">
    <input type="text" id="inp">
  <button onclick="fxn()">Send</button>
  </div>
</body>

please note here i had added height to the parent div and overflow-y to be scroll, and also added ele.scrollTop = ele.scrollHeight; in the js part.

here you can read more about ScrollTop

Upvotes: 2

Emin Uzun
Emin Uzun

Reputation: 99

Try this

function fxn(){
 
  var text = document.getElementById("inp").value
  var ele = document.getElementById("parent")
  var foo = document.createElement("div")

  foo.innerHTML = "<div class = box1>" + text + "</div><br><br><br>";
  ele.appendChild(foo)
  window.scrollTo(0,document.body.scrollHeight);
 
}

.out{
  width: 100%;
  background-color: aquamarine;
}

Upvotes: 0

Related Questions