Start at bottom of div block

Preston_Cammarata · February 20, 2021, 8:00pm

Hi! I’m making a chat for a client of mine. It looks like a cross between Discord and Messenger. Basically, for this to work, I need the chat messages container to start displaying from the bottom. It currently has overflow scroll, so I can scroll down and see messages, but I want it to start from the bottom and not the top. It looks like this https://i.imgur.com/MvgQzHu.png

I cannot really make a read only link just because it’s for my client, so if someone could help describe how I can do it, that would be great! But if you guys really need a read only link, I will make a seperate project to do so. Thanks :)) (btw my due date is the 22nd so i rly need help haha)

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Stan · February 21, 2021, 1:26am

Hi @Preston_Cammarata and welcome, because I cant see your project how data flow is set I can only suggest use WF filters to reverse order.

If you are familiar with javaScript you can use reverse JS function . But as I have mentioned both tips are only suggestions

Preston_Cammarata · February 21, 2021, 1:26am

It’s not a collection it is div blocks inside a container. But how would I use JavaScript ? With an embeded? Could you either lmk how to fix it with div blocks in a container, or show me how to with embeded.

Thank you so much for the reply!

Stan · February 21, 2021, 1:31am

These data (messages) has to come from somewhere, so you can grab these data, make from these eg. an array and reverse rendered order.

Preston_Cammarata · February 21, 2021, 1:31am

Yes. But I have to export the code to HTML/CSS and CMS doesnt support that…

Stan · February 21, 2021, 1:32am

I do not understand what do you mean, why you need to export code?

Preston_Cammarata · February 21, 2021, 1:39am

Because, we have a PHP+MySQL backend, so I need to export to HTML/CSS because the chat messages are saved in a database, and I will print them inside div blocks. Maybe you could help me with the JavaScript reverse part of it?

Stan · February 21, 2021, 1:49am

Ok, now I got it. When Im working on projects outside of Webflow I code everything in code editor as exported WF code is a bit messy and need clean up a bit. Unfortunately Im not familiar with PHP syntax but here is one of many links on web how to do reverse in PHP.

PHP Reverse

Preston_Cammarata · February 21, 2021, 1:48am

Okay, yeah I can reverse it when it’s exported, np. Jus wanted to see if its possible within webflow.

Thanks for your help!

Stan · February 21, 2021, 8:36am

Yes it is possible with JS

Preston_Cammarata · February 21, 2021, 6:25pm

I tried the reverse function. Couldn’t do it. I tried w/ jQuery and w/o jQuery. I tried in the footer code, and in embedded. I guess I’ll have to do it in exported code unless you had a script that could help.