Scrollbar on repeating group

I have the setup inside of a groupfocus which is set to have height fit height to content and has a repeating group as a child element that is set to have no fixed number of columns, is set to fit height to content and the rg has a single text element also set to fit height to content.

It doesn’t matter how many items are displayed, it could be 1, 2, 3…there is always a scrollbar…why?

This must be a bug.

Screen Shot 2023-09-09 at 11.09.16 PM





Screen Shot 2023-09-09 at 11.14.11 PM

Can anybody point what I must be doing wrong? Or confirm that this is a bug or not? Seems to me like a bug as why would there be by default a scrollbar on the repeating group.

@nick.carroll could you confirm this as intended/expected behavior that Bubble adds a scrollbar when they are not needed?

I have had this before, I think I ended up adding like a 2 or 4px margin to the bottom of the RG and it pushed the GroupFocus ever-so-slightly taller to not trigger the scrollbar…

I have found the following had inadvertently made my content ‘larger’ than the group container, or the container around it smaller (bear with me, some of these are more obvious than others, I’m including them in anyone else comes across this post in the future):
Margin, padding, borders, responsive spacing between elements (where you define how much space to automatically include between elements in a container of type Column or Row), and 1x1 px plugins I have hidden on the page… all have bitten me! I usually go to the inspector and mouse over every element I can see to calculate the dimensions. Good luck!

I wanted to do that, but my RG is inside a group focus, so when I click the inspector, the group focus closes and can no longer inspect.

I removed all of those from the RG and still had the same issue…however, I didn’t remove them from the groupfocus, but when removing them from groupfocus, still get the same issue.

Just tried this again, and same result as before. Added the margin to bottom only, then to top and bottom and still same issue.

The only thing that works, is something that destroys the intended design. I have to add a group into the RG and make that group fixed height. If the group is fit height to content to keep my desired design (ie: text element that may have a single line or multiple lines and the distance between entries in the RG remain the same), the RG still has the scroll bar.

The other work around, which again, doesn’t allow me to achieve my desired design, is to on the RG select the stretch height of rows to fill vertical space, and what happens there is the RG doesn’t have a scrollbar, but the distance between entries is unmanageable, and looks horrendous.

This is a Bug as the RG scrollbar should not be dictated by the settings of child elements (ie: group with fixed height versus fit height to content); and the fact that when the RG setting is to stretch rows height to fill vertical space (if Bubble is for some reason making the height of the RG taller/greater in order to fill the vertical space available (ie: space inside of the groupfocus available to the RG) then the Bug is that Bubble is not properly fitting the height of the RG to it’s content properly).

Submitted a Bug report and support told me to make my RG fixed height, which of course is not what I want to do, then when I asked them to send to engineering for a fix, they pointed out the ‘stretch row height to fill vertical space’ but unfortunately in the video I submitted with my Bug report I demonstrated that and spoke on it for a full minute to exemplify how prior to submitting a bug report I tried every possible conceivable way to make it so the RG doesn’t have the scrollbar and each way that it is possible (stretch rows to fill available vertical space, fixed height rg, child element with fixed height), all destroy my desired design.

It should not be the case that a child element in the RG makes a difference, the RG should not have a scrollbar.

It is an easy fix on Bubble part as far as I can tell since there are ways to make the scrollbar not appear. Seems like the issue is in the code Bubble used to set the height of the RG based on child elements fixed height versus fit height to content (maybe they miscalculated the height of the child elements height?)

Bug report #117928

2 Likes

I’ve had this problem a few times before. I think I ended up giving the RG rows a minimum height that was slightly taller than it should have needed to be… And then if that didn’t work I probably added CSS code with an ID attribute to hide the scrollbar no matter what :upside_down_face: Force-hiding it with code isn’t that hard, but I agree that there’s something funky about how parent element heights are calculated.

2 Likes

Thank you for sharing. Just tried this and it works. It also gave me an idea for setting a minimum height on the child elements of the RG, so without doing anything different to the RG (ie: not applying a minimum height to the row), after adding a minimum height of the child element (in this case a text with font size of 14) to have text element min height at 16 px, that also works.

Two different methods to achieve this :grin: however, we really shouldn’t have to do so much workaround to try and get Bubble to function as we would expect as developers…hopefully Bubble will just make it function as we would expect so we wouldn’t need to figure out this hard to come by little workarounds.

I do this in apps where the design desires no visible scrollbar and it works fine, and I’ve started to implement that code into the settings of the app rather than on a page since it would be used app wide.

This topic was automatically closed after 14 days. New replies are no longer allowed.