Is there a way to make the textbox stay fixed at the bottom of the chatbox, regardless of how many messages are present? Currently, it appears after the last message. Additionally, I would appreciate assistance in implementing a scroll feature that automatically moves the view down to the latest message. At the moment, new messages exceed the desired height of the box.
.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>