RG with responsive row plus 2 columns

Nothing has frustrated me more than trying to make the following repeating group arrangement with the new responsive engine.

RG challenge

Is actually possible or am I wasting hours/days in vein?

Don’t be fooled, this is hard because it needs to be responsive. This is easy if we set the left text column to have a minimum width of, say 200px, but then the blue link button is not positioned to the extreme right.

Conversely, if we set the left text column to have a minimum width of 60% then as the page get’s smaller, the text on the left forces the blue link button onto a new line.

How to enable the left text to have a minimum width of 200px AND keep the blue link button on the right?

Again, is this possible?

Simple… it’s just a row within a row… (no columns involved)

1 Like

Change to align to parent. Then your have the text group pinned to the left, the button pinned to the right.

@darren.james7518 I almost never use the align to parent as it allows for elements to overlap and does not force a page break.

You need the left side icon and text to be in a row container, or just make the text have the icon through inline styling. The RG needs to be a row. In one cell will be the left side group with icon and text and then the link button. Make the alignment on the RG spaced apart.

The overall setup is sort of simple when you have a better grasp of what each container type does and how to manipulate them. I’m getting pretty close to just using Row for most things as it has far greater controls than other container types.

@adamhholmes is right on the money.


This doesn’t work, the left column will shrink to the minimal width which means the blue link button isn’t hard right.

the left column will shrink to the minimal width which means the blue link button isn’t hard right.

As I said, it’s just two rows - one inside the other (one for the icon and text - and the other to contain that one and the button)

Repeating Group Layout

1 Like

Thank you, this did the job. In fact, one of the things I tried was to group the elements inside the RG row and then make that group ‘align to parent’ which failed because I was then unable to pin things left/right - the solution as you have given is to make the RG itself ‘align to parent’ and then keep the internal elements exposed (not in a group of any kind).

As @boston85719 points out, ‘Align To Parent’ doesn’t really give you true responsive behaviour as the elements will overlap once the container size shrinks…

So I wouldn’t recommend that here (unless you don’t care about overlapping elements).

As has been mentioned already, two nested rows is the standard way to achieve this type of design, with full responsive behaviour.

1 Like

You are absolutely correct. The mistake I made was to set the RG itself as row but I see you made it column. Anyway, you nailed it and I can finally move on from this speed bump! Thank you

Thank you for your thoughts. I have also found that align to parent comes with some limitation, it’s good to know you recommend mainly using rows, I agree they are really ‘dependable’ , I love the way rows can easily be shift up/down which makes creating forms so much easier.

That really doesn’t make any difference here as I added a group inside the RG cell and just left it as a column (I could have kept it simpler by just setting the RG to Row, but you can’t apply Gap spacing that way).

Yes that works perfectly and I forgot to thank you for creating the demo which helped a lot.


Align to parent has it’s use cases even in responsive workflows. For example for when you want to keep your layout to one row regardless of page width.

Especially when u have lots of elements in a group, responsive breaks the UI.

What works for one scenario won’t work for all. :slight_smile:

1 Like

With this solution, is there a way to allow the text to expand the full width up to the button, but also allow it to have a minimum (so to use all available space)? All that happens with my settings is that it fixes to the minimum and totally ignores the maximum value!

If you want the group to expand up to the full width you need to remove the max width.

(I can’t see what setting you have on the text element, so it could be something you’ve got set there you need to change as well).

I’ve done a short video for you Loom | Free Screen & Video Recording Software | Loom

I can see you’ve got no max width set on the group ‘Group File’, but what about on the text element itself?

Check the ‘fit width to content’ box on the text element…

No joy! See video here Loom | Free Screen & Video Recording Software