Dear bubblers. I’ve been searching for a basic principle tutorial about the best way to make scrollable groups that are surrendered by siblings (other groups inside the same parent) dynamically extend by the 100% available space (and NOT beyond that) until it can, so then it starts scrolling.
I’ve got a repeating group with a dynamic amount of text lines (input fields) with checkboxes.
What’s the best practice to put it’s buttons above or below it (save / cancel etc) without the RG leaving it’s boundaries in a way that’d make the buttons static, so only the RG scrolls and buttons will stay visible all the time?
The annoying part is that my popup this group is placed in will start scrolling to accommodate the extra space caused by the buttons which is a behaviour I really don’t want.
Here’s an image of my current setup, so you can see the issue.
The narrow red border is only there to indicate the boundary of the parent that’s also have a 20px padding around it.
I’ve already burned 10h in this issue and now I’m just burnt out at this point. Any help will be highly appreciated! 
Hi there @peterfwriter, can you show your layout settings on the repeating group, are you using a fixed height for the RG? Did you set the option to fit height to content on the parent group?
1 Like
Hi buddy. I’d love you to take a look at that, but the truth is that I have about 20 groups in separate layers inside this popup which’ll be a nightmare to snapshot out and put it into perspective.
I can work out my end once I understand the basic rules. My goal is not just to repair one element but to learn the bloody thing once and for all. 
Can you share a view only to your editor? So I can replicate your pop-up on my end.
That sounds amazing! Let’s give it a shot.
Hope you have the patience… 
- The column on the right doesn’t really matter, that works perfectly.
- Top (white) row section acts as a side header.
- I’ve got that middle section between the description and the checkline fields, that’s just a separator with some buttons on it to go full-space view.
What I’d like to achieve is that the top grey section (above the line separator) and the bottom checkline section to meet in the middle by leaving equal space for the description and checkline groups to grow and to scroll afterwards.
I really appreciate the attention!
Bubble handles responsive heights and scrollable areas in a somewhat unintuitive way, but you can force it to behave correctly with the following structure:
- Place your Repeating Group (RG) inside a group and turn off “Fit height to content” for that group.
- Set the RG group display to “stretch to fill vertical”
- Wrap that group and any buttons or related elements inside a parent group.
**I think? - I always get confused and have to play around with the settings to make it work right.
Key Behavior Notes:
- Turning off “Fit height to content” prevents the group from stretching based on its internal content. Instead, it will adhere to the max height constraints you set.
- To make this work properly, set minimum and maximum height values on the parent groups. This gives Bubble clear layout boundaries to follow.
Working in the Editor:
- In the Bubble editor, this setup can look very janky:
- The group with “Fit height to content” turned off will collapse and appear non-scrollable.
- To work on inner elements, temporarily check “Fit height to content” so everything becomes visible and editable.
- Once editing is done, uncheck it again to restore the correct frontend behavior.
Additional Tip:
- Bubble does not handle “Fit to viewport height” well, so you’ll often need to manually define heights and scrolling behavior instead of relying on automatic viewport-based sizing.
