Remove Scrollbar from Horizontal Repeating Group

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

Brilliant!! Thank you

1 Like

Thanks for this Patricia, Iā€™ve been banging my head trying to figure this out. I was using firefox and just about to give up, so I tried another browser. This works well in google chrome, I canā€™t get it to work in safari or firefox. Do you or anybody else have an idea of how to get it to work across browsers?

Cheers

@leonidas.petrou4

Thanks for posting in the forum and providing the code. It works well for me.

However, I do not want the page scroll bar to be affected and instead only want to target a specific repeating group.

I have set up the ID attribute on the repeating group and labeled itā€¦however, I have not been successful at getting the code you provided to point toward the repeating group using itā€™s id attribute.

Do you know how to apply the code you provided to a particular repeating group and not affect the page scroll bar?

*******I am updating this post with a link to a forum thread I started in tips with an editor to showcase how to get some custom design scrollbars and to ā€œcreateā€ one in a group. Also hoping some more experienced bubblers could help solve the question that still lingers which is not affect the page scrollbar but only target and alter design of the group using id attribute.

1 Like

I run into the same problem, hope someone knows a solution for this

I ended up here because I was searching for the solution to remove the vertical scrollbar, so Iā€™ll post what I found as the solution for me, in case any other newbies like me gets here same way.

I discovered in properties for the Repeating Group I had to change the ā€œLayout Styleā€ from ā€œVertical scrollingā€ to ā€œFull listā€ to remove the vertical scroll bar.

Iā€™m guessing theyā€™ve added this option since this thread was last discussed :slight_smile:

2 Likes

This is it !

Before I had the same problem, now I put an invisible html object of 1x1px inside all the Repeating Groups with the css style of the webkit-scrollbar so that it does not appear

<style type="text/css">
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
::-webkit-scrollbar-thumb:active {
  background: transparent;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
</style>
9 Likes

did not realize we could do that with CSS inside of groups to style them ā€“ nice hack!

This Worked for me. Thanks alot bro @matiascordoba5
But i just want to confirm that i need to place the HTML element inside the cell of the RepeatingGroup.
and not in a group that the Repeating Group is in. Thanks

6 Likes

@matiascordoba5, youā€™re a genius. It works fine. Thanks

1 Like

Hi, sorry for the delay, the HTML object must be placed inside the Repeating Group to remove the scroll bar of the RG, exactly inside the first cell.

2 Likes

@matiascordoba5 Thanks for the response. much appreciated

1 Like

Thanks a lot for this Matias, much appreciated!!

1 Like