Remove Scrollbar from Horizontal Repeating Group

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

Glad I was in a position to pay you back. I hope you had not gone and changed all your own app RGs

Bad news @leonidas.petrou4 - that no longer works. I guess bubble are working on how they handle CSS or something … seems odd. I’ve found a couple of broken plugins in the past few minutes.

Hi Patrica. I am quite new to bubble. I also used Leonidas workaround that does not work any more. How did you get the Bubble CSS Tools plugin to work?

Hi @tbrink - happy to help. I’m only a matter of weeks ahead of you.

  1. Install the CSS Tools Plugin
  2. Drag the CSS Tools element (in visual tools) onto the page
  3. Create a workflow ‘When Page is Loaded’
  4. Add an Action by going to Element, then under CSS Tools select ‘Add Custom Style to Head CSS Tools’
  5. In the Action, select the CSS Tools element if not pre-selected
  6. Paste text below into Your CSS
    ::-webkit-scrollbar { width: 0px; height: 0px;}

This does not appear to work in FireFox. My users don’t use it so I’ve not bothered to find how to get it working there but if I find something I’ll post it here.

UPDATE: I scoured the web for CSS that might work across all browsers but could not get anything to work in FireFox. I’m not skilled enough to know what I’m doing but it looks like it might require a combination of HTML and CSS. Perhaps someday a good soul will take pity on us and post a ‘free’ solution here.

7 Likes

Hi Patricia.

I used the Ext. vertical scrolling. I does not cost anything and how many items I want to display is dependent on the size of the page, controlled with a repeating group. This feature does not have a scroll bar at all.

@tbrink that’s great. I mostly use the workaround when I’ve got horizontal repeating groups for which there is no equivalent to Ext in vertical scrolling. For others, with multiple vertical RGs or where Ext is not suitable then having the code/workaround is the only solution. At least you know it exists if you want it in future.

1 Like

Any time there is a “code” workaround to the Bubble no-code platform, the Bubble team is well advised to push it into the node-code side of things. For example via a checkbox?

[ ] Never show vertical scrollbar
[ ] Never show horizontal scrollbar

The tricky part for the Bubble team, might be if behavior is not support in all browsers.

5 Likes