Forum Academy Marketplace Showcase Pricing Features

[Here's How] Control number of RG columns at various page widths - new responsive

Greetings!

Just a quick tip on a way to deal with the issue described in this post, whereby you’d like explicit control over the number of RG columns displayed at any given page width.

Until Bubble provides such a feature in the editor, one way to achieve a more versatile grid layout is with a bit of custom CSS.

  • Bubble’s built-in RG behavior results in the number of columns decreasing by one as the page width decreases. You can see that it changes from 4 > 3 > 2 > 1.

  • Using some custom CSS and a conditional, the number of columns can be forced to go from 4 > 2 instead. This example also reduces the gap between cells at smaller page widths, which is not strictly necessary - it just looks nicer. Here’s the CSS…

<style>
#rg-prod-grid {
    gap: 15px !important;
    grid-template-columns: repeat(auto-fill, minmax(40%, 1fr)) !important;
}
</style>

 
Happy Bubbling!

-Steve

4 Likes

thanks for the tip @sudsy .

btw there are almost unlimited possibilities with adding just a little bit of css combined with the new responsive engine. so it would be great if bubble makes it possible to add it to the element directly instead of going with the id and extra html element. :blush:

3 Likes

Yeah, for sure.

FWIW, the CSS should ideally be added at the page or app level, so the HTML element isn’t strictly necessary. I include it with my examples for ease of distribution and for those on a free plan (where adding to the document head is not allowed).

EDIT

Although the HTML element does make it convenient for using conditionals where styles should change based on page width.

:slightly_smiling_face:

Hey sudsy!

Thank you very much for this suggestion. I was looking for it.

I have an rg that should fill the entire width of the screen, with columns that is dynamic to a list I have on this screen.

However, the last column is still at minimum width. e.g. For a 4 column rg the first 3 width were ~30% and the last one is the original size of the element. i.e. didn’t change.

<style>
#rg-prod-grid {
    gap: 15px !important;
    grid-template-columns: repeat(auto-fill, minmax( [[THIS IS WHERE I COUNTED THE PERCENTAGE i.e. 25%]], 1fr)) !important;
}
</style>

Many thanks in advance

Are you using a conditional to change the contents of the HTML element from empty to the custom CSS at the desired page width? Might help to add the working example to your own playground app so you can dissect it (if you’re not averse to installing the browser extension).

Hey, thanks for replying @sudsy

I’ll give you a little context: I have “a list of numbers” element and an rg that uses it as data source all in a floating group.

When a user open a floating group that list of numbers (and so as the rg) change according to the “displayed data” for the floating group

So far it’s working great, meaning the rg is filling the entire page width, except for that last cell which stays its original size

Also, What browser extension did you mean?

Just to be clear, Bubble’s default RG behavior works fine in most situations. The custom CSS tip described in the initial post above specifically addresses the issue referenced there. If you want different behavior, you’ll just have to tinker and explore. I generally recommend avoiding custom CSS unless it absolutely necessary to get the desired behavior. Keep it simple. :slightly_smiling_face:

Click the link in the lower left of the working examples above.

Good luck!

Not to bore you with details, but your solution worked perfectly for what i wanted to achieve.

The default RG is to “reserve” place for empty cells if you know what I mean.

Because I don’t how many list items i kept the rg column min-width to 10px. But the problems is bubble will not ignore the rest of empty space and reserve it. But it’s not how i need it to behave.

So i used your suggestion and now my i can tell bubble how much each each column size should be in percentage — because I wasn’t able to set it dynamically in the rg responsive minimum column width.

Your solution worked perfectly for all cells except the last one for example if i have 2 columns the first will fill 90% and the last will be the size i set in the rg settings (10px).

I tried to tinker with the css but i’m not an expert. So i wanted to reach out maybe there was an obv workaround that im not familiar with.

guys is there a way to do the same with rows ? I tried but i can’t find a way to replace
grid-template-columns: repeat(1, minmax, (0px, 1fr));
by
grid-auto-rows: minmax(max-content, 100%);

thx

You tagged me in your post but i’m not sure myself

<style>
#rg-prod-grid {
    grid-template-rows: repeat(auto-fit, minmax(10px, 1fr)) !important;
}
</style>

Hello everyone, this would help me but I’m new to bubble and I don’t know how to implement the CSS, I inserted an html element and after the # I inserted the name of the rg but I see no changes.

I’m using the new responsive engine
image
and it doesn’t make larger columns but even in large screens it makes 150 columns even if there is more empty space on screen

what am i doing wrong?

Thanks in advance

Did you enable the Bubble element ID setting and then assign an ID to the RG (at the bottom of the property editor for the RG)?

1 Like

No i didn’t, thanks it’s now working.

Can I set the maximum width too?
cause I’m getting this (were I set the max width of the pictures to be 350 px but columns are still 33% and there is blanck spaces around while i’d like to have them centered.


with a minimum column width of 25% i suppose it’s creating 3 columns of 33% but I’d like to have a maximum of 25% column width, I tried minmax(20%, 25%) but doesn’t work.

Maybe I’m doing something else wrong
P.s. out of curiosity, to understand; has the added CSS any side effect to the app? like making it a little slower or anything like it?

Without this workaround I had to create 2 different rg one for mobile and one for desktop, so thanks a lot

thanks Steve this helped a lot!

1 Like

I thought it worked but it seems it’s not.

I think it must be cause I’m on the new engine, as I’m starting to understand that it behaves way too diferently from the normal engine

Maybe cause I have an RG inside another RG, I don’t know.
and btw this behaviour would be nice for what I need but it doesn’t work in my app

in my app it just makes as many columns as the minimum width allows even if the content is larger than that

Sorry to be so noob, maybe I should delete the other comments,

for some reason it’s now working again.
I’ll try to understand what happened.

So for now, thanks again ^^

this doesn’t seem to work

It works for me, so I wouldn’t know why it doesn’t seem to work for you.

You don’t actually need it any longer since Bubble added the feature to repeating groups.

Stretch to fill horizontal/vertical space. That feature does the same thing the code does.

Yes thanks for the reply, I don’t know what I was doing wrong, seems it’s working now, but I haven’t understood how the new options bubble added work as I can’t get the same results, but haven’t gone too deep experimenting