microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.58k stars 1.53k forks source link

Card Carousel Right '>' Button Doesn't Always Disappear At End Of Carousel #4261

Open burtabulous opened 2 years ago

burtabulous commented 2 years ago

Please view our Technical Support Guide before filing a new issue.

Screenshots

Version

I am using version 4.13.0 via cdn:

To determine what version of Web Chat you are running, open your browser's development tools, and paste the following line of code into the console.

[].map.call(document.head.querySelectorAll('meta[name^="botframework-"]'), function (meta) { return meta.outerHTML; }).join('\n')

If you are using Web Chat outside of a browser, please specify your hosting environment. For example, React Native on iOS, Cordova on Android, SharePoint, PowerApps, etc.

Describe the bug

Depending on the screen size (i.e. zoomed in/out on a browser tab or on various phone screens) the '>' right flippe buttonr in the card carousel will not auto hide when a user gets to the end of the carousel.

In Webchat.js file there is a method that adds or removes the following class: '.react-filmmainslider--hide'

Depending on the size of the screen (and typically not until after a y-axis scrollbar becomes present) the class does not get added. I presume this is because the padding/margin on the end of the react-film carousel isn't close enough to trigger the event adding the class.

image

Steps to reproduce

  1. Go to a chatbot with a carousel of cards wide enough to allow for the '>' right flipper button to appear.
  2. Go to the last card on the right.
  3. Zoom in and out on the browser screen

Expected behavior

There will be differences in behavior of '>' right flipper button appearing when it should not be, based on the size of the screen, which can also lead to the last card in the carousel to appear that it is bouncing back when the user reaches the end and hits the '>' right flipper button.

Additional context

[Bug]

stevkan commented 2 years ago

@burtabulous, thank you for pointing this out. I was able to repro the issue(s) where the carousel button either doesn't disappear or does disappear but then the carousel bounces back. I also tested with the latest version (v4.15) with the same results.

I'm investigating this and will let you know what I find.

burtabulous commented 2 years ago

Thanks for investigating @stevkan !

stevkan commented 2 years ago

@burtabulous, thank you for your patience. I am still looking into this and will provide an update when I know more.

stevkan commented 2 years ago

@burtabulous, I hope to have an update for you sometime this week once I connect with a colleague regarding an aspect of this.

burtabulous commented 2 years ago

Thanks!

On May 19, 2022, at 11:11 AM, Steven Kanberg @.***> wrote:

 @burtabulous, I hope to have an update for you sometime this week once I connect with a colleague regarding an aspect of this.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

stevkan commented 2 years ago

@burtabulous, apologies for the wait. I encountered a bit of a delay but am still working on getting an update to you.