Hello,
I have a question. At the moment I’m using a Repeating Group to display a list of users, and I’m trying to make my site responsive, but due to the information I display, I would like to change the number of columns of my repeating group depending on the device.
For example: Desktop (3 columns), Tablet (2 columns) and Mobile (1 column)
I’ve been trying experimenting with conditionals, or Dynamic Data but I cannot seem to find the option.
Hope to hear from you guys soon!
Hi Bernardo,
No need for conditionals, since what you describe is pretty much the way repeating groups work by default. See the following example…
The above goes from 4 > 3 > 2 > 1 columns, but it could easily be configured for 3 > 2 > 1.
Currently, we have no explicit control over the breakpoint widths. Rather, the RG’s Min width of column setting is used along with the max width of the RG (or its container) to determine the max number of columns that will display. The number of columns will then automatically change based on how many will “fit” into the current container width.
Of course, with some custom CSS, more layout control is possible, but I’d urge you to keep things as simple as possible.
Hello @sudsy
The example you shared is exactly what I’m looking for, but when I tried to implement it I could not replicate it.
I tried setting the “min width of column” to 33% (meaning I would have 3 colums) but what happens is when I open it on a tablet I get an horizontal scrollbar to see the rest of the elements.
I don’t know if it is relevant but what I have inside the RepeatingGroup is a regular group which I set up with 95% width of parent.
See the screenshot attached for the behaviour:
Desktop:
I also tried to set up the min width of the column as 0 and trying to setup my group width to 33% but again, no luck
I assumed you’re using the new responsive engine. If not, you probably should be. If you are using the new layout engine, what are the layout settings of the repeating group itself?
I’m using the new responsive engine that I know of. I changed the tab on the UI builder to the “Responsive” tab and updated it to the new responsive features.
This is the setup I have for my RepeatingGroup:
Well, for one thing, the RG is set to fixed width, so it won’t be responsive. That’s why it’s scrolling. (Also, if you click the link in the lower left of the example I provided, you can install an extension and add that working example directly to your app, where you can dissect and learn from it.)
I got it working!
I figured that I even put a set number of rows, so it never overflowed!
I could not see the example code, I was redirected to chrome app store to install Buildshare but got nowhere else.
Thank you very much for the support!
Hello @bernardoespinosa ,
Can you share how you fixed this please?
I have the same problem and can’t figure it out.
See screen captures please.
Thanks in advance,
Guy,
Ottawa, Ontario, Canada.
