https://discord.gg/botpress logo
#🤝help
Carousel Layout Breaks!
# 🤝help
l

limited-orange-3544

01/14/2024, 5:20 AM
Hi there, so we have this issue where we've added a carousel to the end flow & timeout flow of our bot, at the clients request. It doesn't do anything fancy, it just displays links & info. The issue exists with the one in the timeout flow. We send an event trigger on page load to get the bot to start chatting to gain the users attention & this event also appears to start the timeout countdown (which we've set to 2 mins for ease of testing). If a user opens the bot before the timeout flow triggers then the carousel loads up & looks fine. However if a user doesn't interact with the bot before the timeout flow is triggered the carousel appears with a broken layout. This issue also happens if a user opens the chat window then closes it. I'm guessing the issue is that the carousel (Slick Slider) uses it's parent elements to determine it's height, width etc but as the chat window is closed (and the carousel is hidden) it can't obtain these so just spews out whatever. Then when you open the chat window it's exploded. I tried to fix it by tweaking the CSS & also by trying to add some JS that re-initialised Slick Slider when a user opens the chat window. Nothing worked. I searched the help sections for info on this but found nothing. Also didn't find anything on here in Discord. Has anyone else experienced this? Thanks in advance to anyone willing to read this!
Realised the screen shot I attached still had some of the CSS in there I used to try and fix it. This is how it looks with my 'fixes' removed. It's more the carousel can't calculate the required widths IMO.
f

fresh-fireman-491

01/14/2024, 7:46 AM
Can you try and take a look at this and then maybe set the width to 100% and see if that works?
l

limited-orange-3544

01/15/2024, 2:31 AM
Hey! Thanks for the reply. Yea I saw this thread & had tried it out already but to no avail. I'm sure the problem lies in the fact the the Slick Slider is being initialised while hidden which is cocking up the carousels ability to resize itself correctly. I've since told the client this is a ball-ache and he's agreed to just not have a carousel in the timeout flow for now. We'll head back down this rabbit hole later if he changes his mind - which I hope he doesn't!