Excessive white space in repeating group

We are having an issue with excessive white space inside repeating groups.
All groups are set to collapsible.

This is for a proposal builder.

Setup hierarchy
-Group (design area)
-Repeating group (one row, full list)
-Parent Group (“Blocks”)
-Child Groups (7 child groups, stacked all inside the parent group^, inside 1 repeating group cell labeled above^)
-Content such as image, text, video elements inside each child group.

The repeating group cell has a field called “block template” We are hide/showing child groups (blocks) depending on the block template selected.

I’ve attached an explainer video.

Here is a view edit link - https://bubble.io/page?type=page&name=create_proposal&id=whitespacefix&tab=tabs-1

we are trying to reduce the excessive amount of white space shown in the videos.

@chris.williamson1996 - I’ve just gone in to take a look but your app seems to be messed up a bit. The triple image is not showing under blocks. Can you take a look and see what’s wrong please. If you have your settings in edit mode please put them into view mode because if anyone opens the editor on a phone or tablet it can really mess things up - I know, I learnt that the hard way.

Updated, switched to view only.

A couple of thoughts:

The first one doesn’t address your issue, but why do you need the RG at all? The data source is a single thing. May as well just pull the Blocks group out of the RG and delete the RG.

At first glance, your set up with the collapsible sub groups looks on point. It may have something to do with the reusable element block settings being within the main group Blocks. Since that is always visible, it may be preventing that group from collapsing.

I’m no expert on design but I believe the issue is due to aspect ratio. Can you knock the keep aspect ratio setting off temporarily on your two image block and see what happens. I’m not even sure that it is keeping your aspect ratio since the editor shows square blocks and my monitor shows rectangular images but I’m guessing the images you are showing are rectangular and that is making the image taller than is needed so the white space is happening within the image nothing to do with the block or the RG.

First point - Since it’s a proposal builder a user could have multiple headings, image blocks, text blocks etc.

Setting up in a repeating group and assigning a field called “block template” that controls which block is visible in the RG cell allows it to be created to however the user wants.

just showing/hiding single groups without a RG would limit the user to 1 block per type. (I believe)

Point 2: I will definitely try that! I haven’t actually played around with that at all, and it’s very possible that could be causing it.

Just attempted that, No success =(

The 3 image block also includes “keep aspect ratio”

My primary thought is for some reason the top block doesn’t have an issue due to it being up top. However all other blocks below have a large amount of white space. As if the top block or another specific block (group) isn’t collapsing correctly.

After about 4 hrs of trying to find a solution I came to forums lol

Ah I see. I think I have the solution, but it would require a wee bit of rework.

You don’t need all those blocks stacked on top of each other. Your main Blocks group currently has height of 1,561. Once you’re done, it will have a height of 353 as this is the tallest “sub block”.

Steps:

  1. Move all the blocks to have y = 0.
  2. Reduce the height of the blocks group to be 353.

If this works, you may still have some white space, but it should be much less. If that happens, I’ll advise on how to get rid of that. But let’s first see if this approach helps some.

It should not be necessary to put the blocks on top of each other @SerPounce, in fact, the advice in Bubble is to stack groups under each other. Give the three dots top right, in appears to indicate that it is the individual block that is the problem.

@chris.williamson1996 can you put a colored border on the images so we can see where they are, please.

Closest it’s got!

Heres a duped link with edit mode enabled.

only issue that persists with this option is the blocks for “heading” “text only” yields a large amount of whitespace

updated.

Yes, I expected that would happen. The reason is that your text only block is now shorter than the height of its parent group Blocks. The solution here is:

  1. Increase the height of the text block to be 353.
  2. Add a new group within the Text block with a height equal to the empty space between the bottom of the text element and the bottom of the block.
  3. Make the new group not visible and collapse it.

You can then repeat steps 1 - 3 for your other blocks to make it perfectly clean.

And the problem is immediately obvious I think. It’s the three dots.

The first block needs to be aligned with the bottom of them. Then everything will work fine.

1 Like

I just updated it, you where 100% right!

@SerPounce - also tested that out and it worked as well!

You guys are both amazing! Thanks for your help!

1 Like

any time. Glad to help.

1 Like

Glad to be of service but I advise you to stick to Bubble’s recommendations and never put blocks on top of each other if you can avoid it because they tend to really mess up when you are making things responsive. You can get away with it when you are only showing one block at a time but your users can pick any number of blocks so that could be a disaster. Looks great BTW.

1 Like