Invisible Scrollbar, NEED IT 'VISIBILE' - Webchat ...
# 🤝helpc
clean-doctor-91284
08/17/2023, 9:47 PMUsing the Webchat Advanced Styler, I have not found a solution to an invisible/transparent scrollbar. Please help. Here is my current CSS link::: https://webchat-styler-css.botpress.app/prod/code/de62a289-9dea-41e0-848a-9a6c2f083553/v60147/style.css
https://cdn.discordapp.com/attachments/1141850718228205608/1141850718467268790/image.png▾
f
famous-jewelry-85388
08/18/2023, 6:05 PM@bright-magazine-792 can you help here please?
b
bright-magazine-792
08/18/2023, 11:13 PMhey @clean-doctor-91284!
May I know which browser are you testing on?
c
clean-doctor-91284
08/19/2023, 5:30 PMChrome
clean-doctor-91284
08/21/2023, 3:44 PMI don't know if you saw my message @bright-magazine-792 . I'm not a frequent Discord user. We have tested the widget within Chrome.
b
bright-magazine-792
08/21/2023, 5:14 PMSo you need an invisible scrollbar?
In your screenshot I don't see a scrollbar, just curious on what do you want to achieve?
c
clean-doctor-91284
08/21/2023, 5:27 PMThe status is invisible and that is the issue. I want a visible scrollbar, thus I put in the 'help' request. I want a normal looking scrollbar that is visible for the user can visual see to go up and down the chatbot window.
clean-doctor-91284
08/21/2023, 5:28 PM@bright-magazine-792 We have made every possible CSS adjustment within the Advanced Styler and not able to product the results of a visible scrollbar.
clean-doctor-91284
08/21/2023, 5:34 PM/* Styling for the chat container, including color, scrollbar width and color, and border */
.bpw-chat-container {
background-color: #FCFCFC;
scrollbar-width: auto;
scrollbar-color: #999999;
border: none;
}
clean-doctor-91284
08/21/2023, 5:34 PM/* Styling for the scrollbar in the chat container */
.bpw-chat-container::-webkit-scrollbar,
.bpw-chat-container::-moz-scrollbar {
width: 10px;
background-color: #999999;
border: none;
}
clean-doctor-91284
08/21/2023, 5:35 PM/* Styling for the general scrollbar in the web page */
::-webkit-scrollbar {
width: .5rem;
}
/* Styling for the track of the general scrollbar and the chat container scrollbar */
::-webkit-scrollbar-track,
.bpw-chat-container::-webkit-scrollbar-track,
.bpw-chat-container::-moz-scrollbar-track {
background-color: #999999;
}
clean-doctor-91284
08/21/2023, 5:35 PM/* Styling for the thumb of the general scrollbar and the chat container scrollbar */
::-webkit-scrollbar-thumb,
.bpw-chat-container::-webkit-scrollbar-thumb,
.bpw-chat-container::-moz-scrollbar-thumb {
background-color: #999999; /* Light grey thumb color */
border-radius: .1rem;
border: 0.7rem solid transparent;
}
clean-doctor-91284
08/21/2023, 5:35 PMb
bright-magazine-792
08/21/2023, 5:57 PMbright-magazine-792
08/21/2023, 5:57 PMcan you try this
bright-magazine-792
08/21/2023, 5:58 PMcopy the contents of it and paste it in the code editor and click "run"
c
clean-doctor-91284
08/21/2023, 6:37 PMPerfect. I see a few lines were deleted. Thank you soooo much for your assistance.
2 Views