Repeating group with different cell size

Hi everyone !

I’m trying to set up a direct message feature in my app.
I would like users to have to possibility to upload an image in the direct chat so i made it this way in the editor :

The little pink rectangle contains the text posted by the user and the rectangle with the blue border is the group that contain the image uploaded by the user with the text.

Here is my issue : If the user do not upload image with his text, the group with blue border is not visible and his height is collapsed, but this is what i get :

The group height is collapsed but the cell size do not fit the text.
I would like the cell size to fit each time the height of the content : to be bigger if their is a picture and to be smaller when there is just text.
Is that possible ?
I hope it’s clear

Thank you so much for your help

Check if there is a minimum height set for the RG row, maybe that’s it.

Thanks for your answer Newed, what do you mean by “RG row” ?

Here are the settings of my repeating group :

Apparently you are not using the new responsive engine, correct?

If that’s the case, first I would advise upgrading to the new responsive engine as soon as possible, because while we have this resistance and aversion to changes that occur with things we’re used to, many of them are good changes. As much as you may need to relearn some things, over time you will see that the options and features that the new responsive engine allows will change the way and agility you develop in Bubble.

That said, to get around this issue using the old engine, we must consider that not all elements in the old engine can be collapsed. The vast majority of them need to be placed within a common group, as groups can collapse when hidden. Therefore, the following steps must be done:

1 - Group the image (or any other element) that you want to collapse when it is not visible;

2 - Create a conditional in this group that when satisfied the group will be invisible;

3 - In the RG, change the height “H” to the height resulting from the sum of the heights of the elements that will remain visible (your text) and the elements that will collapse (in your case the group that will contain the image) multiplied by the initial number of RG lines.

OBS: if you want to have some space left between a row of the RG and another, add the height of this space in this sum.

The result will look like the following image, where:

  • Blue: we have the RG, initially with 2 lines and with a height of 120px (60px for each line);
  • Gray: we have groups A and B, each with 28px (28*2 = 56px, leaving 4px of space just as an example);
  • White: the items inside the groups, in this example just text, but it could be any element.

Note that when i changed the height of the RG to 150px (30px more than the groups actually need), in which case the excess height will remain in the RG’s cell even if the group collapses.

Hope this can help in some way.


Thank you so much for taking time to answer me.

1/ Concerning the new responsive engine, i know i have to switch to it. But as you said, i will have to relearn some things and maybe modify some aspects of my app. As i have customers on this app, i want to wait for the good time to it.

2/ Concerning my issue , your answer helped me a lot. It was not the exact resolution, because my issue was actually deeper : As it is a conversation, I have 2 groups in the same cell. One is triggered when the message come from current user, the other is triggered when the message come from another user. The cohabitation of both was huge part of my issue.

But your answer perfectly solve the problem firslty described, and i finished by resolve it using your comment and your video also. so Thank you again.

Have a good Day !

1 Like

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