Repeating group - image doesn't fill out cell entirely

I’ve created a dynamic group - and each cell should have an image with info about each cell’s event on the picture. It’s an my page: “find_event”.

But… the picture doesn’t fill out the cell entirely. I’ve tried with all options in “run-mode rendering”, watch videos, adjusted width etc. I’ve tried to insert a “shape” and a “group” in the repeating group … It still doesn’t look good!

Hope one of you will check out the link and suggest a fix.
Thank you!

Well…I just don’t know!

I tried a few things, I even created a new group within the cell MyEventsCell moved things around, moved that Shape you had lost behind the RG out of the way, just in case it was messing with the responsive engine. Adjusted the scale modes, all sorts…but sorry, I can’t get it do expand and lose that bottom space.

It is annoying as hell!

It is, indeed! I appreciate your time, Dave - and thanks for your kind response again today.
I will jump to working on some of all my other issues… :slight_smile:

I tried it in the repeating group I have setup - created a group in front of the image with some text in the group and it looks ok - is that what you’re trying to get to display? I have the image set to rescale. If so maybe you should try rebuilding the repeating group and add one element at a time testing it to make sure it works until you have all elements in place. If one causes the problem then you know which it is and can figure out something.

I looked at it and couldn’t figure out what’s causing problems. Set-up seems right, but must be something off.

I did notice that the images appear 150px in height (the height you have them set) so perhaps it’s actually something else in the repeating group that’s making each cell taller than 150px.

If that doesn’t work, I’d just trying rebuilding those RG’s and see if it comes out better. Now that you know how to create them, it should only take a few mins.

Also, FYI, the text on top of your images isn’t all that readable. 2 easy solutions for this – 1) add a dark box that’s mostly transparent on top of the image. Then, set the text to be a light color. 2) Add borders and/or box shadows to the text so that it stands out.

Best of luck!

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?