Hello,
How can I hide the horizontal bar?I'm using scrollable area widget for mobile
Hello, you just need to find the class that is giving you the scroll bar to that widget, and then with that class change the background color of the scroll bar to the same color of the body.
What I am going to do is pick the parent class of that widget, or what is giving the scroll bar.
And I am going to use this code:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_scrollbar
.list::-webkit-scrollbar-thumb{
background: var(--color-background-body);
}
.list::-webkit-scrollbar-track{
::-webkit-scrollbar {
width: 10px;
Use this CSS on your theme
ps: I(you) need to see which is the background color of the body and change the background on the above CSS on the places that have the background property
I have seen that you have the ability to choose the style of the scroll
Kind Regards,
Márcio
Hi Diaa,
Add "overflow-x: hidden;" to style (in properties) of image widget to achieve
Source : https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
Thanks, Aadhavan S
If i am not wrong if you are going to put that property you will lose the functionality of scrolling
Hi, there is a way to achieve this with css and keep it as scrollable, you could use inline styling, but I prefer using a class and adding the css to it in the style sheet.(If outsystems doesn't already have the hide-scrollbar class, then you can add it to your theme css)Use the following CSS to hide the scrollbar:
.hide-scrollbar{ -ms-overflow-style: none; scrollbar-width: none;}.hide-scrollbar::-webkit-scrollbar{ display: none;}This usually works on the usual browsers, but the chrome mobile app does add its own scroll bar for vertical scrolling if the page is longer than the screen.