Is there a way to adjust my chat box so that messages appear at the bottom, like in any chat app? I am currently using Django and Bootstrap 4, here is the code I have:
<div class="list-group flex-column-reverse " id="Chatting" style="transform: rotate(-180deg);">
{% for message in object.messages.all %}
<a class="list-group-item list-group-item-action border-white " {% if message.user == user %} style="background-color: rgba(190,229,235,0.1);"{% endif %}>
<div class="row text-lowercase" style="height: 15px;">
<div class="col text-left">
<p style="font-size: 10px;">{{ message.user.first_name }} {{ message.user.last_name|slice:":1" }}</p>
</div>
<div class="col">
<p class="text-right" style="font-size: 10px;">{{ message.date|date:"SHORT_DATETIME_FORMAT" }}</p>
</div>
</div><span>
{{ message.text|linebreaks }}
{% if message.attachment %}
<img src="{{ message.attachment.url }}" width="50%" ></img>
{% endif %}
</span>
</a>
{% endfor %}
The id list of name has overflow: auto on it.
If I use the code without The rotation part and without flex-column-reverse, the list of messages begin from the top of the box, which is counter-intuitive. If I use only flex-column-reverse I get the ordering correct but when the page loads it loads with the oldest message and the user has to scroll down, it also means everytime he writes a message he has to scroll down again. The hack that I am using works by showing the order correct and the page loads at the last message, however the scroll bar is at the left of the chat box and works in reverse with the mouse scroll.
I added the ending screenshot. Is there any solution without using javascript? I am really horrible in comprehending javascript :÷
https://i.sstatic.net/CNnNu.png