question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Screenshots

Version

I am using version 4.13.0 via cdn: <script src="https://cdn.botframework.com/botframework-webchat/4.13.0/webchat.js"></script>

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-film__main__slider–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]

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
stevkancommented, Apr 15, 2022

@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.

0reactions
stevkancommented, Jun 1, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bootstrap Carousel Transitions and Prev/Next Buttons Not ...
I'm trying to implement the twitter bootstrap carousel, and it's not working - it doesn't switch images ...
Read more >
Card Carousel Slider has disappeared - WordPress.org
Hi there, I used the card carousel widget on my site. After a few days it was suddenly gone. I could not see...
Read more >
Carousel - Bootstrap
The carousel is a slideshow for cycling through a series of content, built with CSS 3D ... Carousels don't automatically normalize slide dimensions....
Read more >
Button controlled Scroll/ carousel interaction in Figma - YouTube
Source File: https://yakash91.gumroad.com/l/button_carousel.
Read more >
Designing A Perfect Carousel UX - Smashing Magazine
To navigate the carousel, you need to drag the slider from right to left. That's unlikely to be expected by most users though....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found