Say the RG is 100%. Can we have the column width adjust to the # of columns present without setting it to a fixed # of colums? So RG width / # of columns?
Example:
…and so on. I’m folling around with the settings but can’t get it to work.
I’ve come across this problem too. It knows that there are no more repeating group items but still shrinks the cells width to the minimum. Hoping there’s a solution/fix coming.
Might submit a bug report.
2 Likes
Exactly what I’m realizing.
Have emailed the team and included a reference to this forum post too.
1 Like
@alejandrowunderlich just an update from the Bubble team - long story short this is expected behaviour given their implementation of CSS Grid. It’s looking at how many it ‘could fit’ as oppose to the data that we’re trying to populate into the repeating group.
The difference between the two engines is to be expected, unfortunately - the old engine was based on our own hand-coded algorithm, which happened to be better for your layout, but the new engine is based on Grid and its standards. In this case, setting a minimum column width of 270px causes Grid to look at the width of the repeating group and say “how many columns can I fit in here with each column taking up at least 270px?”, and thus at the full-screen layout it picked 5 columns.
I played around with the CSS myself and it seems by changing auto-fill in the grid-template-columns attribute value to auto-fit, you get the expected behavior. Full example;
Original: grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
New: grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
I’ve just done this by giving the repeating group a class and then using that as a selector to override the CSS.
As you can see, the second row spreads out across the entire grey area (repeating group).
2 Likes
This is brilliant, thank you!
Hey @Sarah_Esteve, I use the Classify plugin as this repeating group is fairly common across my entire app and that way I can place the CSS in Settings > SEO/metatags > Advanced Settings.
Another option is to give the repeating group an id of say “foo”.
And then use the following in an HTML element where 270px is the min-width of the column in the repeating group settings.
<style>
#foo {
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr))!important;
}
</style>
It’s worth noting that this also really depends on your repeating group configuration - for example my design is mobile-first so I have the following settings.
2 Likes
This is awesome! Can you share how you use the classify plugin?
I share there the solution I found to do what I was searching for to do :
Take a read of the post here - it explains how to use it; 🔥 Classify: A tiny plugin that brings CSS power to Bubble
This topic was automatically closed after 70 days. New replies are no longer allowed.