CSS Dynamic Rows/Columns in RG

Tips
1

As the flexbox responsive system had been introduced a couple of years ago and we are still missing some key properties to change conditionally, I needed to add some CSS. For repeating groups, what is very frustrating is that there is no way to dynamically change from not fixed rows to fixed rows.

For example, if on a desktop you want the rg to have as many rows as needed, you would set the number of rows to not fixed number, but if on mobile you want a fixed number of rows, there is no way to conditionally change from not fixed number of rows to a fixed number of rows.

The code below is not perfect and needs to be tweaked for your design but it is the base for how to change the number of rows and columns

<style>
#rg-change-rows {
grid-template-rows: repeat(3, minmax(max-content, auto)) !important;
grid-template-columns: repeat(1, minmax(0px, 1fr)) !important;
}
</style>

For my specific use case I wanted to let the desktop have not fixed rows and on mobile fixed rows…using the below CSS worked for me to change when on mobile. I do this by conditionally adding to the RG and ID attribute for mobile. Each layout is different so you may need to tweak things.

<style>
#rg-change-rows {
overflow: auto !important; 
gap: 60px !important;
 grid-template-rows: repeat(1, minmax(max-content, auto)) !important; 
grid-auto-columns: minmax(max-content, 1fr) !important; 
grid-auto-flow: column !important; 
border-radius: 0px !important; 
opacity: 1 !important; 
align-self: center !important; 
min-width: 0px !important; 
max-width: 1200px !important; 
order: 12 !important; 
min-height: 0px !important; 
height: max-content !important; 
flex-grow: 0 !important; 
flex-shrink: 0 !important; 
width: calc(100% - 0px) !important; 
margin: 0px !important; 
z-index: 14 !important;
}
</style>

Notice the Gap setting in the CSS on the RG…this is necessary because if you do not include it and you have on the elements inside of the RG a margin, the margin is not applied on the first set of elements. What this means is if your normal RG has 4 items on a row, and has 3 rows, and you apply the CSS to create 1 row, the first 4 elements will not have any margins applied, while the remaining cells elements will have the margin. So, make your Gap be the margin you want between elements and conditionally remove the margin from the elements within the RG, since the gap and margin are applied to elements after first 4 in this example.

3 Likes
2

Hey Boston,

Any reason not to conditionally change the data source to a list/search together with :item from and :item to for mobile in this use case?

3

That would not solve the design issue of on desktop having multiple rows, but on mobile having a single row since it would only make it such that not all items that need to be in the RG to remain in the RG. The concept is to still have all items in RG available, but make it a horizontally scrolled view with one row as opposed to a multiple row view.

4

Ah that makes sense Boston, did not get the switch from vertical to horizontal scroll from your initial post.

5

It might even be an option to achieve the same result with vanilla Bubble using 2 repeating groups (one is nested in the other). Hope I understand you correctly btw :smile:.

chrome_OKGaExaqHC

1) Repeating group outer:

image
image1096×1386 86.8 KB

image
image481×1014 41 KB

image
image486×529 23.9 KB

2) Repeating group inner

image
image481×985 36.6 KB

image
image480×1008 40.9 KB

image

Disclaimer, I have not used it extensively, so did not run into all of the edge cases you run into when a feature is used in production.

6

Thanks @gerbertdelangen. I’m aware of being able to add multiple elements. One of the goals and reasons for using the CSS is to use only one element. When flexbox was introduced, what I was most excited about was getting away from needing multiple of the same elements. The old responsive was something that often I’d have 3 of the same thing (1 for desktop, tablet and mobile).

One of the reasons I always stress to Bubble that everything in our layout and Appearance tabs need to be available to change conditionally, so as to make it possible to create any design we want with just a single element.

Not just the sense of single element for the sake of it, but also the performance and WUs at times. Less is better in my opinion when it comes to using elements on the page.

7

No problem Boston. Thank you too, I like this exchange of ideas. It often makes people better at the subject they are discussing.

I normally stress using vanilla Bubble over using as little elements as possible, as it is easier to get support when something goes wrong. Of course the specific use case requires the consideration of what is most important.

True that!