I love the repeating groups feature but the default scrollbar that appears when using vertical or horizontal scrolling looks pretty bad. How about allowing us to use a slim, hideable scrollbar, like most modern HTML5 apps are using now? Something like http://rocha.la/jQuery-slimScroll
3 Likes
We’re using the default one right now which looks what users see on their computers. Can you share a screenshot? On MacOS it’s quite good.
Hi @emmanuel, I’m being picky because the app I’m building has a lot of scrolling elements- it looks great on mobile browsers as the scrollbars are hidden by default but on Chrome I end up with the default big blocky scrollbars like this:
I dread to think what it would look like in IE! It’s not that the scrollbars themselves look bad, just that it’s a shame we can’t customise them, to better fit with the app’s theme. Would be great to be able to unify the look across platforms.
Are you on Windows?
Generally speaking using the native browsers bars is safer as its more consistent (and often less buggy).
I’m on ChromeOS. I appreciate that native is usually best, it’s just at least in the case of my app it makes it feel like a bunch of web 1.0 iframes. I feel like custom scrollbars are pretty standard on embedded elements in web apps now- Facebook uses them on their sidebars, Pixlr, Codecademy, Cloud9, Nitrous all use them, pretty much anything you see on the Chrome web store will use them.
If that’s not practical, is there any way to set overflow:hidden so I can just hide the scrollbars on my app?
Did you try webkit scrollbars. I have tested them and they work, add the below code to the HTML header on your edit page properties and it should work
<style> ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #D62929; } </style>
4 Likes
Oh by the way you can add this in here also
It should transcend down to the element
@emmanuel what about adding an ability to add our own custom CSS that can be used to override the default elements? I know this is not inline with Bubble’s vision but just a thought!
1 Like
What about just typing this in the page header?
That can always work.
Since it’s code, not sure adding a field so that people type code makes a bit difference…
Probably right, actually what i was thinking of is something like this
Better organized and easier to edit
It’s not something we really want to promote (yet), so i’d rather keep that in the header, that does the job.
Gotcha 
Awesome! Looks like just what I needed, thanks!
1 Like
So this webkit thing was very useful for chrome. I’m wondering what other elements can we style using this code drag and drop approach other than scrollbars ?
1 Like
Hi @AliFarahat
I am hoping you might be able to help out with a problem I am still having with custom scrollbars.
I’ve read through the forum and saw you post on the subject a few times and your posts were some of the most helpful.
I put together a publicly viewable editor to and posted in tips to help others overcome some of the struggles I faced, but also in an attempt to get more experienced bubblers to help solve an issue of targeting only the scrollbar in the group using an id attribute and not affecting the design of the scrollbar on page.
Hopefully this would help all other future bubblers avoid spending lots of time trying to get this issue figured out.
Cheers
1 Like
Thank you!