New Responsive Engine and Repeating Groups

Need help New Responsive Engine
1

Hi folks :wave: Hoping someone might be able to assist me. I’ve been playing around with the new responsive engine and am struggling to produce the behavior I want. Essentially, I have a repeating group where each cell contains a reusable card. This card has both a horizontal layout, where the image and content are side by side, and a vertical layout, where they are stacked, depending on the width of the container. What I want is for the repeating group to default to the horizontal layout, unless the container width is less than this layout allows, at which point, it should collapse into the vertical layout. Everything works dandy until I nest this card within a repeating group. Bubble’s new responsive engine seems to default to fitting as many cells as possible, based on the minimum column width, regardless of the responsive setting set for child elements. To make matters worse, the conditional statements editor doesn’t allow me to reference the column width settings to, for instance, change this value depending on the width of the parent page. I’ve been banging my head against the wall for an entire afternoon trying to suss out a solution. Can anyone enlighten me?

A very rough demonstration of what I’m talking about — first outside the repeating group and then inside:

2

Hi @ts11,

Exactly.

Correct.

I don’t think I’ve tried to do exactly what you’re’ trying to do, but your desired behavior might require some custom CSS. This post might prove helpful (if you’re not afraid to get your hands dirty with CSS).

It’s not exactly your situation, but it might be similar enough for you to glean some helpful insights.

-Steve

1 Like
3

Thank you, Steve! I’ll dig into that. In the meantime, I’ve settled for getting hacky with a second hidden repeating group. Not the most elegant solution, but it does the job.

1 Like