I'm currently working on developing a messaging app similar to WhatsApp. In the app, I have a parent div that holds the messages, and a child div that contains the text field and send button. My goal is to keep the text field and button at the bottom of the parent container even when scrolling through messages. I've tried using Bootstrap 4's fixed bottom class, but it hasn't been successful...
I've also come across other solutions on Stack Overflow suggesting to use position: relative; in the parent and position: absolute in the child div, but that hasn't worked either.
This is the code for my parent container:
<div class="container justify-content-center w-50 position-relative" style="height: 400px; overflow-y: auto;">
<app-message-container></app-message-container>
</div>And here is the code for the child container, i.e., app-message-container:
<div class="container d-flex fixed-bottom position-absolute">
<input class="form-control" type="text" placeholder="Enter Text">
<button class="btn btn-success">Send</button>
</div>Thank you in advance.