web client stopped scrolling down automatically when new message gets posted

[pgoldweic]

I have your chat widget embedded in a web page, and after working as expected for a couple of days, it has now decided to stop scrolling automatically whenever a message gets posted (this is a conversation with a unique user, me, while testing). Any ideas what could be causing that? And, is this a bug that needs fixing? (BTW, I see no relevant errors in the console).

A small update on this. I wonder if this started happening when I started 'identifying' the user in my code (that is, using Botkit.identifyUser(user) after the initial call). Just an idea though, I haven't noticed anything else changing.

[Purus]

Same issue too for me. Any possilbe reasons to look for?

[peterswimm]

See anything in the javascript console or in your apps console?

[Purus]

No errors or warning in Console..

…

On Tue 26 Jun, 2018, 5:53 PM Peter Swimm, ***@***.***> wrote: See anything in the javascript console or in your apps console? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABBx5xFEJaW9iu4EF6AP-NQpDPUwvEiSks5uAie2gaJpZM4TkOyF> .

[peterswimm]

In the botkit console AND your browsers javascript console?

[Purus]

I have confirmed in both the console. No errors of any type.

…

On Tue 26 Jun, 2018, 7:32 PM Peter Swimm, ***@***.***> wrote: In the botkit console AND your browsers javascript console? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABBx57ubCk9-5QxC1ZhG1YjCZqda6fLQks5uAj70gaJpZM4TkOyF> .

[benbrown]

Thijs is a known issue - it is a quirk of the way flex layout works in CSS. It will only auto-scroll if the user does not scroll back up from the bottom of the element.

The solution is to add a scroll-to-bottom function in the client code that is called whenever a new message arrives.

[Purus]

Thanks for the heads-up. Can your please share some code on how to do that? I can test and make a pull request.

…

On Tue 26 Jun, 2018, 8:53 PM Ben Brown, ***@***.***> wrote: Thijs is a known issue - it is a quirk of the way flex layout works in CSS. It will only auto-scroll if the user does not scroll back up from the bottom of the element. The solution is to add a scroll-to-bottom function in the client code that is called whenever a new message arrives. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABBx56uuxnOyPJWOoQSOhk3e4uKTh7xBks5uAlHegaJpZM4TkOyF> .

[pgoldweic]

@Purus, have you been able to come up with this piece of code, and if so, will you be able to share? Or @benbrown ?

[Purus]

Sorry. I am not using botkit now. Thanks, Purusothaman Ramanujam

…

On Thu, Sep 27, 2018, 2:31 AM Patricia Goldweic ***@***.***> wrote: @Purus <https://github.com/Purus>, have you been able to come up with this piece of code? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABBx51zah2WJpUbJdorZ_e0J86ErId4iks5ue-sfgaJpZM4TkOyF> .

[gagan-bansal]

Use this function wherever message is added

  // add this in messanger
   scrollBottom: function() {
     this.message_list.scrollTop = this.message_list.scrollHeight
   },

[pgoldweic]

Thanks for replying both @Purus and @gagan-bansal!.
I also come up with a similar solution after a few hours of posting the above yesterday, but did not have a chance to share it yet, as I am in the process of testing it more thoroughly though, and possibly see if that one, or the one you posted, work better. I will post here the update. Thanks again.

[pgoldweic]

The above solution does not seem to work for me (note: I'm using botkit-starter-web version 0.0.1,). I had to do the scrolling based on the 'section' tag that contains the 'message_list', and therefore gave it an id (e.g. 'botScrollingSection').

My scrollBottom function currently looks like the following (thanks to some relevant pointers I found online):

 scrollBottom: function(){
  	var scrollingSection = document.getElementById('botScrollingSection');
  	if (scrollingSection) {
  		scrollingSection.scrollTop = scrollingSection.scrollHeight - scrollingSection.clientHeight;
  	} 
 }

I am calling this function twice from within the 'renderMessage' in client.js (as the first line and also the last line in this function).
I also ended up doing the following inn styles.css:

• removed the 'display: flex' setting from 'message_window section'
• replaced 'overflow-y: auto' with 'overflow-y: scroll' in the same 'message_window section'

The combination of the above seems to be working for me. Thanks again to those who have responded to this thread.

BTW, this seems to be taking care also of the issue with scrolling in Firefox (and is the reason why I needed to do the style changes in styles.css)

[rajasekaran-k]

Hi @pgoldweic Thanks for the solution. If we remove display:flex, the incoming messages are starting from top instead of bottom during start of the conversation.
Thanks!

[rajasekaran-k]

Hi All, Fixed the issue.

Added in _chat.scss
#message_list { overflow-y: auto; }

Added scrollBottom method in client.js

scrollBottom: function(){ var scrollingSection = document.getElementById('message_list'); if (scrollingSection) { scrollingSection.scrollTop = scrollingSection.scrollHeight - scrollingSection.clientHeight; } }
and calling the method from

that.on('message', function(message) { that.renderMessage(message); Botkit.scrollBottom(); });

[pgoldweic]

Hi @rajasekaran-k ,
Glad you fixed it, although I'm afraid that your solution may not also resolve #38 (scrolling in Firefox). My solution apparently solves both of these issues for me (note that I had to use ' overflow-y: scroll' when I removed the 'display: flex'. ), so I suggest double checking that your solution also enables scrolling in Firefox.

[mhjb]

@pgoldweic thanks very much for your solution. Helped get my bot working on Firefox, finally! One thing I'm still having trouble with is to have the first few messages in a conversation attach themselves to the bottom of the botScrollingSection. Any ideas for that?