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).
Although the HTML element does make it convenient for using conditionals where styles should change based on page width.
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.
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
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)?
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.
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!
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
