Log in to AnswerLog in to Follow
2022-10-11 21-19-04
Fábio Miguel Ferreira Coelho
74Views
10Comments
Solved
Scroll Down - Chat
Question
JavaScript
Reactive
Application Type
Reactive

Hi buddies,


I hope you're doing well.


I'm developing a chat.

So, when the user writes a new message I want to scroll down automatically to the last message.



I used this script - $actions.ScrollToElement($parameters.WidgetId);  - but this script does scroll to the first message. (Client action - AdjustScroll)


Can you help me please?


Thank you,

FC

0
0
10 Oct 2021

Replying to Fábio Miguel Ferreira Coelho's comment on 17 Oct 2021 01:56:24

Hello @Fábio Miguel Ferreira Coelho,

The the awser from @Harika Ramadalai is almost right. 

Just need to change the JS to this:

var objDiv = document.getElementById($parameters.elementId);

objDiv.scrollTo(0,objDiv.scrollHeight);

Also instead of refer to the container by a class is better by an ID. After and this JS, you need to add an input parameter and also link that input to the ID of the container. See this images:

I try to add the OML, but I don't know why, now it have 7Mb and OS have a limitation of 4Mb. You can download from here:

https://1drv.ms/u/s!AkWQrO3B6Nz8ghGuVIXvOr9nxfvG

Hope it helps.

Nuno R

See solution in context
1
0
17 Oct 2021

Replying to Fábio Miguel Ferreira Coelho's comment on 17 Oct 2021 14:57:31

Hi @Fábio Miguel Ferreira Coelho ,

You need to change the order of this events:

On the "SendMessage_OnClick" action.

Hope it helps,

Nuno R 

See solution in context
1
0
17 Oct 2021

Hello @Fábio Miguel Ferreira Coelho, 

Can you share the OML?

Is better to help you on solving the issue.

Best Regards,

NunoR

1
0
10 Oct 2021

Hello Nuno,


Thank you for your message.


I'll send you the oml file, but I need some days because I need to isolate the chat part.


Thank you,

FC

2
0
11 Oct 2021

Replying to Fábio Miguel Ferreira Coelho's comment on 11 Oct 2021 20:26:45

Hello Fábio,

Is the solution from @Harika Ramadalai works it´ s perfect.

If not try to send the OML that me and other users can help better.

Best Regards,

Nuno R

1
0
12 Oct 2021

Replying to Nuno Ricardo Rodrigues' comment on 12 Oct 2021 08:15:15

Hi Nuno,


I tried the solution of @Harika Ramadalai, but not works and I don't know why.

I send you the OML.


I hope you can figured out.


Thank you,

FC

Chat.oml
1
0
17 Oct 2021

Replying to Fábio Miguel Ferreira Coelho's comment on 17 Oct 2021 01:56:24

Hello @Fábio Miguel Ferreira Coelho,

The the awser from @Harika Ramadalai is almost right. 

Just need to change the JS to this:

var objDiv = document.getElementById($parameters.elementId);

objDiv.scrollTo(0,objDiv.scrollHeight);

Also instead of refer to the container by a class is better by an ID. After and this JS, you need to add an input parameter and also link that input to the ID of the container. See this images:

I try to add the OML, but I don't know why, now it have 7Mb and OS have a limitation of 4Mb. You can download from here:

https://1drv.ms/u/s!AkWQrO3B6Nz8ghGuVIXvOr9nxfvG

Hope it helps.

Nuno R

1
0
17 Oct 2021

Replying to Nuno Ricardo Rodrigues' comment on 17 Oct 2021 14:36:41

Hi Nuno,


Thank you for your fast answer.


I did what you told me.

Now when I write a new message the Scroll Down works, but it goes to the penultimate message instead of goes to the last message.

Do you know why?


Thank you so much for your help!!


Kind regards,

FC

1
0
17 Oct 2021

Replying to Fábio Miguel Ferreira Coelho's comment on 17 Oct 2021 14:57:31

Hi @Fábio Miguel Ferreira Coelho ,

You need to change the order of this events:

On the "SendMessage_OnClick" action.

Hope it helps,

Nuno R 

1
0
17 Oct 2021

Replying to Nuno Ricardo Rodrigues' comment on 17 Oct 2021 16:26:28

Nuno,


Thank you for your effort.


Works perfectly!

It's solved.


Kind regards,

FC

1
0
17 Oct 2021

Hi Fábio Miguel Ferreira Coelho ,

Use the below JS to scroll to bottom of the list. .wrapper is class name. 

//CSS styles Height of container
.wrapper {
    height: 500px;
    overflow-y: scroll;
}
// JS to scroll to the bottom of the list
var objDiv = document.querySelector('.wrapper');
objDiv.scrollTop = objDiv.scrollHeight;

Hope this helps you.

Regards,

Harika



3
0
12 Oct 2021

Hi Harika,


I tried your solution, but not works and I don't know why.

I send you the OML if you want to check it out.


Thank you for your help.


Thank you,

FC

Chat.oml
1
0
17 Oct 2021
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.