Hide scroll bar on Horizontal Repeating Group

[mball]

Thanks Edward. Strange

The ID of my repeating group is set:

The CSS on the page is:

But in the browser its coming up as:

If I manually edit the style in Inspector Tools it works and the horizontal scroll disappears (on the instance I change):

Doesn’t seem to be using the CSS style I set on the page

[edward.w.douglas]

Can you send me your app preview link? Front end is fine for now.

[mball]

Bubble - Visual Programming

[edward.w.douglas]

I see. So it is a repeating group inside of a repeating group. I can not see that the CSS being applied. I will have one question. It may sound stupid. Did you add the CSS header to the same page?

[edward.w.douglas]

The CSS should come up here if it is on the same page :

[mball]

There’s embedded repeating groups, not sure if that affects it?

set on the right page
ID is for correct repeating group

[edward.w.douglas]

It should not affect it, however you could try to add the same overflow - x hidden to the parent repeating group?

[mball]

Same. Doesn’t add it but if I manually add a scroll it shows the horizontal scroll bar

The CSS is just not being added to the element

[edward.w.douglas]

I would need to look into your backend. Can you give me read only access? You can DM me if you want. I tested the nested repeating groups and works just fine for me:

With CSS:

Without CSS:

[edward.w.douglas]

So just for everyone to see. I’ve checked the app. I found no issues whatsoever. I added the exact same CSS to a HTML widget and it works fine. So it looks like the page header does not render for some reason.

[edward.w.douglas]

I think we got this at the end

[lucaspenanguer]

@edward.w.douglas hello Edward I use your solution : #(groupid){ overflow-y:hidden !important; }

It hides the scrollbar well but now I can’t scroll down to see the other posts of my repeating group… any solutions to hide the scrollbar but still be able to scroll down the repeating group ?
Thank you !

[buero]

Try this but change the colors hex into transparent in my code or to the colors you want:

First. Install Java Script Toolbox
Also install the CSS Editor Plugin Classify

Activate the Attribute to Element in the Settings.

Enter this to the RG you want to Apply in the Attribute section

for the different scrollbar enter: {addClass: "betterScroll"}
for scrollbar and synced RG Groups add {addClass: "scrollSync"betterScroll"}

Go to workflow

When Page load
Step 1: Run JS
And then just copy paste this into the JS field:
(Not async)

$(".scrollSync").on("scroll", function() {
	var scrollPos = $(this).scrollLeft();
	var page = $(this).parents(".Page").first();
	$(page).find(".scrollSync").scrollLeft(scrollPos);
});

var betterScrollOptions = {
	"elm": false,
	"mX": -1,
	"mY": -1
};
$(".betterScroll").each(function() {
	if($(this).hasClass("inited"))
		return true;
	var width = $(this).width()/$(this)[0].scrollWidth*100;
	if(width > 100)
		width = 100;
	$(this).addClass("inited").css({"position": "relative", "overflow": "hidden"}).prepend("<div class='scrollBg' style='position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: transparent; z-index: 10;'></div><div class='scrollBar' style='position: absolute; bottom: 0; left: 0; width: "+width+"%; height: 5px; border-radius: 5px; background: #e5f0fc; z-index: 10;'></div>");
}).on("scroll", function() {
	var width = $(this).width()/$(this)[0].scrollWidth*100;
	if(width > 100)
		width = 100;
	var scrollBar = $(this).children(".scrollBar");
	$(scrollBar).css({"width": width+"%"});

	var scrollPos = $(this).scrollLeft();
	var maxScrollPos = $(this)[0].scrollWidth-$(this).width();
	if(maxScrollPos < 0)
		maxScrollPos = 0;
	
	var scrollBg = $(this).children(".scrollBg");
	var scrollBarDiff = $(scrollBg).width()-$(scrollBar).width();
	var percentageScroll = scrollBarDiff*(scrollPos/maxScrollPos);

	$(scrollBar).css({"left": scrollPos+percentageScroll});
	$(this).children(".scrollBg").css({"left": scrollPos});
}).on("DOMSubtreeModified", function(){
	var width = $(this).width()/$(this)[0].scrollWidth*100;
	if(width > 100)
		width = 100;
	var scrollBar = $(this).children(".scrollBar");
	$(scrollBar).css({"width": width+"%"});
}).on("mousedown", ".scrollBar", function(e) {
	e.preventDefault();
	betterScrollOptions.elm = $(this).parents(".betterScroll").first();
	betterScrollOptions.mX = e.pageX;
	betterScrollOptions.mY = e.pageY;
});
$(document).on("mousemove", function(e) {
	if(betterScrollOptions.elm !== false) {
		var diff = e.pageX-betterScrollOptions.mX;
		$(betterScrollOptions.elm).scrollLeft($(betterScrollOptions.elm).scrollLeft()+(diff*Math.abs(diff)));
		betterScrollOptions.mX = e.pageX;
	}

}).on("mouseup", function() {
	betterScrollOptions.elm = false;
	betterScrollOptions.mX = -1;
	betterScrollOptions.mY = -1;
});

Btw thx @petter for your book - hope i could give some back with my answer here, except from my money buying it hahaha

_

https://william-rau.com
https://www.linkedin.com/in/williamrau/

[petter]

Thanks for sharing

[buero]

BTW there is a plugin in the plugin that does it with one click lol - but i just tested it in chrome

[alang.zul]

This is the solution! Thanks!