Align titles of columns for repeating group, retaining its responsiveness

Need help Responsiveness
1

I have a repeating group with four columns and want to add the following titles above each column respectively: date, e-mail, name, price.

How can I do this while at the same time retaining responsiveness, with the titles remaining aligned with the respective columns when the screenwidth changes.

Thanks in advance,
Timon

2

Hi @Timon :slight_smile: It will probably involve some more adjustments, but I would start by having the heading text elements be the same default size as the rg text elements, and have the same responsive settings for the headings, as the related text elements within the repeating group. For example, the “Price” heading would be the same size as the text in the RG “Current cell’s Thing’s Price”, and “Date” would be the same size as the text in the RG “Current cell’s Thing’s Date”.

Alternatively, if your repeating group has one column and many rows, you can place the headings within the first cell of the repeating group, inside its own group. Then have a conditional statement on the group which is “When Current cell’s index is not 1” --> This element is visible, and collapse this element’s height when hidden. This will make sure the headings only display within the first cell.

3

Hey Faye,

Thanks for the reply. That’s also what I already did but still it doesn’t completely align unfortunately.

I have one more question in regard to repeating groups: In case he repeating group is empty, I would like to either hide the titles or how a message saying that it’s empty, any idea how to do that?

THanks in advance!

4

I figured it out, posting it for other users that might encounter the same problem:

Within the repeating group I had two more text boxes on the right which I didn[t include in the group in which I put all the titles. I copied these two text boxes into the group with titles and then hid them. This way, everything stays perfectly aligned!

image.png1487×231 25.8 KB

1 Like
5

No problem at all :slight_smile: Bubble keeps margins constant, so the workaround is what you did, or to add transparent shape elements to adjust spacing between elements. I don’t have the link now but if you look at the example apps, the Bubble.is example uses this approach in some parts of the app.

If you’d like to hide the rg when there are zero results, you can set up a conditional statement “When repeating group’s:count is 0” This element is visible (unchecked). Then create a conditional statement on a text element which becomes visible at that time stating “No results found for (Input Search’s value)”, for example.

1 Like
6

That’s awesome, thanks. First time I hear about example apps, where do I find them? I’m sure I can avoid asking a lot of questions checking those out.

7

My pleasure! You can find them here (in the top right is the ‘Example Apps’ link):

8

You’re a genius, man ! Thanks a lot.

1 Like