Repeating group - image doesn't fill out cell entirely

Do you want those images to be the entire background of the cell? I would use a group the size of the cell, with the background set to the Current Cell’s Image. Then place all of the text and button elements inside of that Image group. You can group the text and buttons, have a black background with around 50% opacity, to help make it easier to read over the top of the images. I created a new page to test - Is this what you’re looking to do?

https://secretnightapp.bubbleapps.io/version-test/test_findevent

1 Like

Wow thank you…! You did exactly what I have been trying to do for many hours! I will take a look at how you did this, so that I can learn it myself.

(I have tried all of what you just suggested, but obviously I must have been doing something wrong).

Not sure this is the nicest way to display the events, but that’s a different story:-)

Thanks a lot for your time, all - fayewatson, sridharan.s and john3!!

1 Like

Awesome!! No problem at all! :slight_smile: It’s done mainly using a group within the image group. After you create the repeating group, place one group within the cell and expand it to the size of the cell. Then you change the background of that Group to be an image:

With these image settings:

Inside of that image Group, is another Group which holds the text and button elements. You already had this group holding text on the left side of the cell, but I just expanded it to be the entire size of the cell, and placed the buttons inside as well. The background for that is the same as you had it (black, with 33% opacity)

*Note, you have to move the top group out of the way to see the Image group below it in the editor:

And then place it back to normal:

1 Like

Dam…I should have thought about that it is so obvious! I think the original plan was to have the image the width it was, but to fill the height, I was so focused on closing the gap, that adding another group to the cell group and setting its background to the image never even crossed my mind…

In words of Bono…“some days are better than others!”

At least you sorted the problem :thumbsup:

1 Like

In my own app I had a similar situation with a RG that only contained an image and an icon in each cell. I couldn’t figure out how to get rid of the spaces either; and I can’t remember how many days went by before I ever thought to change the image to a group. We’re in the same boat on this one Dave! :sweat_smile: Now we know!

Hey @fayewatson do you have an idea why these groups aren’t expanding to the same height as the repeating group’s row?

Hmm… I’m not 100% sure. I think the white comes from the images being cropped? It may work if you change the data type for that field to image (instead of a file), and then use the ‘processed with imgix’ option. This left side window will appear and you would select “resize to fit the dimensions by cropping”.

Trying to figure out the order of operations here.

It looks like the first cell is being extended vertically because there’s a lot of text in the top text box and it’s preserving the vertical separation between the top and bottom text box. So that makes the main group longer. The image is the group’s background, so it expands to fit. The link that’s also inside that group, and on top of the text boxes, doesn’t expand along with the group; it stays the same height so the bottom half of the group is poking out from under the link area.

The other cells don’t have as much text, so their groups are default size, so their groups aren’t expanding vertically. That’s leaving a gap at the bottom of the cell that’s just getting ignored.

Do you know of a way to tell the group to expand to fill the height of the repeating group cell in addition to the width?

Ohhh, right, I see that now. I didn’t realize that the text was expanding the cell. The image groups will shrink/expand based on the repeating group as a whole widening or shortening. I don’t think the cell image group will expand vertically when other cells in their row do, since there’s no change in the overall width of the repeating group. The only way I know of to prevent that white space is to expand the original height of each row, or to limit the amount of characters for that text element field. Will try to think of some other ways to have it adjust.

*This workaround was used when trying to create a ‘Pinterest-style’ layout (it’s a bit messy though). In this example, each each column is its own repeating group, which eliminates the problem of cells not expanding when a cell in their row does. It requires some workarounds for responsive as well. A bit complicated, but just wanted to point it out incase your priority is to eliminate the negative spaces.

1 Like

Neat, thanks. For now I just checked the option to not expand the text box to accommodate longer text. That keeps it the default size.

Do you think there’s a good reason for the other cells to not expand to match the tallest cell? I can’t think of one.

No prob! That’s probably the best bet too. In regards to the other cells not expanding to match the tallest cell, I would prefer it as well - but I don’t think it’s on purpose that they don’t expand

Worth asking. @emmanuel Is there a way to make the cells of a repeating group expand to match the height of the tallest cell in the row?

A lot of cases we’d not want them to, so if this is changed it should be an option.

Can you share some examples?

When showing a list of blogs, and say in responsive mode they wrap to the next row, the definition of “row” becomes blurry, then wouldn’t want an excessive whitespace under the smaller ones.
Did you work around it by having a group or shape determine the height?

So are the cells calculated once when the page is loaded or something? I assumed they recalculated every time the responsive logic had to deal with something moving.

As far as I can tell there isn’t one thing that can determine the height. There’s the default height of the cell which is set in the editor when you make the elements a certain size to work with them. Than, as I just discovered, the cell will resize if something like the text inside of it gets taller. But that resize logic doesn’t extend to any of the OTHER cells. So they’ll stay the same size, leaving behind empty space that’s unaccounted for.

That’s why it seems like the behavior should be to not leave empty space. Empty, unaccounted for space is ugly and wasteful.

1 Like

Thanks for explaining further, that’s a good summary.

I can imagine a large set of regression tests would be needed for a layout change to repeating groups : )

At least this case seems simple enough. Just check for the tallest cell in the row and make the other cells expand to match it. The repeating group already knows where to position everything because it’s laying out the cells correctly, it’s just not expanding the content to fit.

Thanks man! This reply saved me right now.