Fix textbox at the bottom of chatbox and implement scroll

Question

I need the textbox to be fixed to the bottom of the chatbox and stay there irrespective of how many messages there are, right now it is after the last message. And also it would be great if someone can help me implement scroll in this that moves the view down to the last message. Right now it would just go out of the box if I add more messages than the desired height.

.chatbox {
  position: relative;
  background-color: #fff;
  max-width: 350px;
  height: 400px;
  margin: 20px;
  border-radius: 10px;
  font-family: Avenir;
  font-size: 14px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav {
  background-color: #0077fb;
  height: 30px;
  padding: 10px;
  color: #ffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  align-items: center;
}

.chatbody {
  padding: 10px 10px;
}

#bot {
  padding: 10px;
  float: left;
  margin: 5px;
  max-width: 90%;
  display: table;
  clear: both;
  margin-left: 15px;
  background-color: #edefed;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#user {
  padding: 10px;
  float: right;
  max-width: 70%;
  background-color: #0077fb;
  margin: 5px;
  color: white;
  margin-right: 15px;
  display: table;
  clear: both;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

#text {
  width: 90%;
  outline: none;
  border: none;
  padding: 10px;
  border-radius: 50px;
  margin-top: 7px;
  margin-left: 10px;
}

.icon {
  padding: 15px;
  color: #0077fb;
  right: -30px;
  min-width: 50px;
  position: absolute;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<container>
  <div class="chatbox">
    <div class="nav">
      <span>Alice</span>
    </div>
    <div class="chatbody">
      <div id="bot">Hi there</div>
      <div id="bot">How are you doing ?</div>
      <div id="user">I am doing good</div>
      <div id="bot">Awesome. So how can I help you today ?</div>
    </div>
    <div>
      <input type="text" id="text" name="" placeholder="Message" autocomplete="off">
      <i class="fa fa-send icon"></i>
    </div>
  </div>
</container>

https://stackoverflow.com/a/39613036/8620333 – Temani Afif Aug 04 '20 at 09:10 — Temani Afif, Aug 04 '20 at 09:10

score 3 · Answer 1 · answered Aug 04 '20 at 09:05

I've added a class to one of your div's called .message and used this code:

.message {
  position: absolute;
  bottom: 0;
  width: 100%;
}

working demo

.chatbox {
  position: relative;
  background-color: #fff;
  max-width: 350px;
  height: 400px;
  margin: 20px;
  border-radius: 10px;
  font-family: Avenir;
  font-size: 14px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav {
  background-color: #0077fb;
  height: 30px;
  padding: 10px;
  color: #ffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  align-items: center;
}

.chatbody {
  padding: 10px 10px;
}

#bot {
  padding: 10px;
  float: left;
  margin: 5px;
  max-width: 90%;
  display: table;
  clear: both;
  margin-left: 15px;
  background-color: #edefed;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#user {
  padding: 10px;
  float: right;
  max-width: 70%;
  background-color: #0077fb;
  margin: 5px;
  color: white;
  margin-right: 15px;
  display: table;
  clear: both;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

#text {
  width: 90%;
  outline: none;
  border: none;
  padding: 10px;
  border-radius: 50px;
  margin-top: 7px;
  margin-left: 10px;
}

.icon {
  padding: 15px;
  color: #0077fb;
  right: -30px;
  min-width: 50px;
  position: absolute;
}

.message {
  position: absolute;
  bottom: 0;
  width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<container>
  <div class="chatbox">
    <div class="nav">
      <span>Alice</span>
    </div>
    <div class="chatbody">
      <div id="bot">Hi there</div>
      <div id="bot">How are you doing ?</div>
      <div id="user">I am doing good</div>
      <div id="bot">Awesome. So how can I help you today ?</div>
    </div>
    <div class="message">
      <input type="text" id="text" name="" placeholder="Message" autocomplete="off">
      <i class="fa fa-send icon"></i>
    </div>
  </div>
</container>

Fix textbox at the bottom of chatbox and implement scroll

1 Answers1