https://discord.gg/botpress logo
Join Discord
Powered by
Change the width of carousel
# đź“–tutorials
j
Mke sure to put this code under all of the other code in the webchat styler if you dont it will overide all the other code I set mine to 90% as the image shows .bpw-message-container, .bpw-message-group { -webkit-box-orient: vertical; -webkit-box-direction: normal; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%;
Happy bot building🚀
thanks to a new CSS cours i joined 9 weeks ago i know some now
m
Have you got a working demo to test and review?
j
yse
doesnt wok in emulator
u have to preview it
ohh
alright
here is the stylesheet
unfortunary bot
that one was private
m
I think your suggestion would affect all message containers.
j
yes
it changes the message contaners width
m
Also no need to add that css as it’s just duplication code
j
reay ?
then were do you change it ?
m
Yes, all I would say is something like: .bpw-message-container, .bpw-message-group { width: 100%; /* change this value to your desired width */ }
j
doesnt
wrk
cuase ,chatpt gave me the SAME thing
i plaed it in and it didnt wok
wait let me try agan
oh, htt works
m
that way its only targeting the width, your suggestion is included all browser support prefixes, it’s not related to the actual solution. Maybe we need a demo to compare?
j
man, im going to buy a new keyboard
alright
m
lol
What do you use these days
j
a crappy laptop keyboard
when you press keys the board goes down
m
Oh dam must be a hassle!
j
try
lesson, images, bugs
yse it is lol
m
Are you seeing the same thing? There’s no gap between each item in the carousel
j
oh crap, i forgot about pone
m
Another thing you can see is all conversations get affected, so pushes more content down as there’s less horizontal space
j
alrght ill delete ths post
sorry ii was sleeping
b
@jolly-policeman-82775
j
oh.
lol
b
Can u belive I still have this issue 🤣 @jolly-policeman-82775
j
omg
@boundless-intern-1517
b
okay brother thank u
d
@most-oil-31163 Is there a way to only set the width for the carousel at 90 percent so arrows show BUT remaining messages are still at 100%. Seems unnecessary to cut 10% for everything else plus do not look nice.
m
I’ll take another look as by default the botpress carousel should fit
e
hi the botpress carousel is still not adapted so that we can clearly see the arrow! When will it be good?
m
Have you got a screenshot of the bot in use showing the carousel?
e
m
Thanks, is that in the emulator or the actual site
e
In the emulator
m
If you inspect with dev tools, what is the position of the button
Looks like it needs to be pulled to the left more
Should also test the left button to see if that needs adjusting, is it getting the css styles I suggested?
e
the problem is that we have to use the bar below to frame the image and the arrows but it should not have this bar.
img-4247
m
So just need to pull the buttons back more from the edge, as they are currently overflowing the container which causes the scroll bar to appear. Can you share the bot url? I can inspect the css.
e
I sent it to you by mp
g
@most-oil-31163 is there a way to get the arrow on the right without having to move the horizontal scrollbar
m
Yes it’s possible, usually best to test the changes on the actual published version of the bot as the emulator version doesn’t always represent the final product
g
So in order to make it work I have to change the carousel width so that the arrow fits inside the chatbot UI?
m
Yes, just need to pull it back until it’s in a place where it’s fully clickable and doesn’t cause any horizontal scrolling
The left arrow should ideally match so visually they look consistent
Sorry meant only moving the buttons
.slick-prev { left: -4px; } .slick-next { right: -4px; } This will pull the buttons close to the carousel edge
The botpress team should review this also as suspect it could be a potential issue for others using carousels
3 Views
PreviousNext
Powered by