Remove Scrollbar from Horizontal Repeating Group

I’m using a repeating group to display menu options, but on desktop there is plenty of room, so I don’t need it to scroll and the scroll bar doesnt not look very good. Is it possible to disable it?

1 Like

The bar shouldn’t be there if it’s not scrollable. Can you share a link (as usual, without a link no one can really help).

3 Likes

@emmanuel Here is a repeating group whose search results in only two options. It still displays a scrollbar

https://testapp299.bubbleapps.io/version-test/index?debug_mode=true

Is your computer set to show scrollbars by default? here is what I see.

We have this problem with all our windows customers, so we had to come up with a different design. The Mac is pretty nice and automatically hides scrollbars when they’re not necessary, but Windows doesn’t. It’ll show every one of those little buggers. Unfortunately for us, the vast majority of our users are on Windows machines, so we had to get creative.

Thanks for the tip. @emmanuel would it be an easy fix to have the ability to turn it off completely? If not, then i’ll workaround it.

Fixing this is a bit tricky because if we fix it for windows, it’s likely going to break other platforms. I’ll look into it but i would suggest a workaround for the near term.

Okay, thanks!

I don’t know if this helps since I have only been working on this for 2.5 days. I had a similar problem because I did not like the look of the scroll bar and most the time, my repeating list, will not have enough elements to really need to show the scrollbar. However, the scrollbar always shows even when I had less items than needed in the list. (I use a MacBook Air).

My workaround

  1. I used a SHAPE element and placed it over where the the scrollbar shows
  2. In the CONDITIONAL tab of the SHAPE element I filtered IF (list of elements (names) is > 15) then HIDE the SHAPE element. That way the SHAPE is only visible (hiding the scrollbar) if there are less than 15 names in the list.

Will it this work in all platforms?
I have yet to test it. @emmanuel is this a viable strategy for this problem?

In the screenshot I left the shape element in gray to demo what I am talking about. I will will change the color of the shape element to the same color as the background to seamlessly hide the scroll bar.

Screenshot #1 (with gray SHAPE covering the scrollbar under the conditional)

:

Screenshot #2 (with blue’ish SHAPE)

4 Likes

Nice tips there. It will be better if we are able to hide it or style it

Hi, for any one looking for a way to disable the scroll bar you can just set the scroll bar width equal to zero (this is helpful to make mobile apps look more aesthetic). To do this add some code to the Page HTML Header (after double clicking on the page, you should get a pop-up as in the screenshot). Then paste this into the Page HTML Header:

<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: 0px; 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>

Note, this hides the scrollbar of both the page and any repeating group on that page.

I know it’s a bit of a hack way of doing it, but it works. Hope this helps.

20 Likes

@leonidas.petrou4 your Page HTML is really useful for vertical scrolling RGs but I’m wondering if you can tell me how to set the height to 0 so it also works for horizontal scrolling RGs. I’d do it myself but I don’t know HTML.

Hi @patricia. To remove the scroll bar for horizontal repeating groups you simply do as you said, set the height to 0px. You can copy-paste this code into your page HTML header. This will ensure that the repeating group (both vertical and horizontal) won’t have a scroll bar. I tested it out and it worked.

<style> ::-webkit-scrollbar { width: 0px; height: 0px;} </style>

Hope it helps :slight_smile:

14 Likes

Absolutely nailed it @leonidas.petrou4 - thank you for the rapid response :+1:

1 Like

@leonidas.petrou4 Your code worked perfectly last week. This morning when I loaded up my RG app, the horizontal scrollbars are showing again. I haven’t touched the app since I added your code so I can’t explain why this happened. Might something else have changed, perhaps something bubble has changed that prevents your solution working?

You can see my simple RG at https://swipe-to-del.bubbleapps.io/version-test/tab_card_swipe?debug_mode=true or you will know by looking at your own app. Any ideas?

Hi Patricia. Same thing is happening on my side. I think either bubble or webkit changed something, in which case it is out of our control. I’m quite disappointed. I think a potential work around for you would be to use a fixed number of cells (3 cells) repeating group (1 row and 3 columns) then add a Workflow when the right arrow is clicked > Element actions > Repeating Group > Show next, to scroll horizontally through your groceries. And same applies for scrolling left. At least this way you wont have a scroll bar.

1 Like

Thank you @leonidas.petrou4 - I’m using drag and drop (swipe) on either the tabs or the card below so I have workflows already built. I’ll experiment but it needs to change one tab at a time so it can’t just Go To page. Also, that example was the simple one. I actually need to build this so it is responsive to screen size meaning the number of visible tabs changes … but despite days of experimentation I still can’t seem to get that working. I’m hoping to get a few suggestions here RG - Are Dynamic Columns Possible? but so far nothing :frowning:

@leonidas.petrou4 - whatever changed it looks like it has broken other things too. This is ZeroQode’s demo for their customizable scrollbars and it isn’t working either. My hunch is that bubble’s rebranding has changed something - perhaps it is code in the Page Header that is the problem. https://zeroqode-demo-04.bubbleapps.io/custom_scrollbar

@leonidas.petrou4 - I got your code working again. I suspected the problem was the bubble rebrand. I’m using the CSS Tools plugin for other things but I thought I would try it for your height = 0 and width = 0 and it works beautifully. I simply added the CSS element to the page then added a workflow for Page is Loaded

4 Likes

Lovely @patricia. Thank you!

1 Like