Unable to implement scroll in a Chat interface like - whatsapp, Instagram etc

0
I am trying to build a chat interface in Mendix native that behaves just like whatsapp. However I am unable to implement the following -  1. When user opens the chat, the screen scrolls down to to the bottom where the latest message is. 2. When user sends a new message the view automatically scrolls down to focus on the latest message.   I tried using a list view, gallery, repeater but none are solving the scroll problem.
asked
2 answers
2

Hi Shantanu,

You can add a container with some random class (CSS) at the bottom of the page. Once you come on the page, you can trigger a nanoflow, which should have a 'scroll-to' activity that asks for the class name and it scrolls the page to where the class is.

image.png

This way, you will be immediately scrolled to the bottom of the page once you come on the page.

 

As for your second requirement, 

you can again trigger the scroll nanoflow, once you receive a new message, either by refreshing the top level object, which will ultimately retrigger the nanoflow for scroll.

Let me know, if you have any issues,

Hope it helps!

answered
1

Hi Shantanu , 

There are 2 ways to achieve this but you need to change the list sorting to 'Descending': 

1)You can put these on your listview or gallery :

container:{

display:'flex',

flexDirection:'column-reverse'

}

If your listview or galley is inside of a scroll container on the page/layout you need to remove otherwise it will overwrite the list/gallery scroll .

 

2) First you can rotate 180 degrees your list then rotate -180 degrees list item like this :

container: {

transform: [{rotate: '180deg'}]

},

listItem: {

transform: [{rotate: '-180deg'}]

}

}

hope it helps 

 

 

answered