Conditionally Changing Min Column Width of Repeating Group

[david62]

I am trying to alter the width of the columns in my repeating group conditional upon the width of the page. Unfortunately, the option to change the width of the column in a repeating group isnt available conditionally.

Looking through other discussions on this, it appears I can do this with custom CSS combined with the Classify plugin. But most discussions seem to assume the user is pretty knowledgeable about how CSS works so I can’t seem to fit all the pieces together.

Can anyone walk me through the whole process of how this will work?

I want to put in place a rule that when the Current Page Width < 600px that it will change the Min Width of Column in my repeating group to 300 px.

1. Do I need to use the Classify Plugin?
2. If so, what do I put in the ID Attribute of my Repeating Group?
3. What is the code I need to add into an HTML element to make it happen?

[rpetribu]

Hi @david62 !

You can’t change it dynamically, but you can change the Min Width of the group that lays inside this column. The result will be the same.

Can you share, more precisely, what are you trying to do? Because we can suggest other approaches to help you to get this to work.

[david62]

I got it working for what I want. I was trying to ensure that as the screen size changed that the column width and # of columns in the repeating group changed as I wanted them to. The real struggle was when i got down to mobile size I actually wanted the column width to increase instead of decrease as the previous changes had.

Using a combination of the correct starting Min Column Width and conditionally changing the Repeating Group’s overall width and the width of the Group I put in the column, I was able to make it happen.

[paul29]

Hi @rpetribu
I am trying to do what you’re talking about but it doesn’t seem to work (unless I’m doing something wrong).
I have my column min width set to 120:

and I have my group within the repeating group min width set to 150 on a conditional:

But then I get this result:

The min width of the group doesn’t seem to affect the width of the column.

I feel like I might be doing something stupid here but I’ve been playing around a bunch and can’t seem to get the effect you’re talking about.
Any help would be much appreciated.
Thanks,
Paul

[rpetribu]

Hi @paul29 !

This is happening because the column width of your repeating group (120 px), in some moment, gets smaller then the width of the group that is inside it (150 px). In other words… your repeating group keep shrinking while the width of the group inside it don’t. So they will overlap each other.

[paul29]

That makes sense, thanks.

But, as per your original suggestion in this thread, I have set the minimum width of the group inside. If I make the min width of the column greater than or equal to the min width of the group, then the min width of the group becomes irrelevant, no?

[nocodeventure]

It’s terrible to work with atm, we need the width of the column to be able to resize automatically depending on the content inside of it @bubble

Getting something like below working takes tremendous effort.

[nocodeventure]

Just noticed a new option here which does the trick!

Wrapped horizontally

Select this option if you’d like the items in your repeating group to wrap to a new row if the number of items takes up more space than the parent container allows. Use this setting if you’d like to create a “tag” like list where columns fit width to their content and do not need to be evenly sized.

[xtechaus]

how did you get that working?