Nothing has frustrated me more than trying to make the following repeating group arrangement with the new responsive engine.
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?
@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.
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.
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).
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.
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!
