I need to set the scroll bar to be not visible in the screen until the content fixes on the shrinked screen on shrinking the screen.
Hi Aman,
Without any other context of the issue you are facing, the CSS properties that you might be looking for are: overflow-y and overflow-x.
If you are using OutSystems templates, I believe that at least the overflow-y is set to auto, as the vertical scrollbar should adapt to the content of the screen and only be visible when needed.
Please give us more context about the issue, if you don't manage to sort this out.
Regards,
PZ
Hi @Aman Kumar Bhardwaj
Hiding the scrollbar might aid your design in some cases. But in others, removing this part of the page can actually harm the user experience.
Most visitors associate the activity of scrolling with a visible scrollbar. So, if you apply this method to an entire page, it might seem strange to some. Also, scrollbars tell us how much of the page we have left to view (unless infinite scroll is implemented). Unless you have some other visual indicator that there is more content left to see, a lack of scrollbar could be off-putting.
However you want to apply so you can play with overflow
overflow: auto : The auto value is similar to scroll, but it adds scrollbars only when necessary:
div { overflow: auto;}
---------
div { overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: scroll; /* Add vertical scrollbar */}
reamMore
Hope this will help you !!
Weather to show scroll bar or not is a css property set for a particular container generally. If you want to apply it for a particular container just required items inside a container and and set CSS property as shown below:If you want to apply for whole screen use css style sheet editor (As shown in the image below "CSS") and apply same CSS to the whole screen, this will be the first tab inside the style sheet editor and tabheading will be the name of the respective screen.