Howdy, @adaptifyDesigns and @Stephenk!
I wanted to jump in here to let you know that while this layout situation is unique, it is still achievable within the builders as things stand. Including some sort of “nested” wrapping functionality would require a near complete overhaul of the interface to include a new layer to interface with like that, which is likely not to be used all the time in most situations. So while that is not something that would be anywhere on a timetable at this point, you will still be able to achieve your desired results as you’ll see below.
First, the situation at present we’re dealing with is a bar with two containers, equally spaced, both with centered content, and the one on the right has the social icons that we need in line on the last “row” at the bottom of the container. I’ve mocked up a simplified example below that we’ll use for this discussion (In lieu of a form, I’m using a button at the moment to illustrate the technique I’m about to show):
@adaptifyDesigns, you are on the right track in this thread. While you might instinctively think to change this Container’s Flex Layout to Column to get the layout you want, the issue with that is all your items are direct children of the container, so each button will layout in a column formation as well, when what we really want is for them to be in a horizontal line. Keeping the Flex Layout as Row and enabling the Wrap Children checkbox on that container is the first thing you’ll want to do (which you mentioned above).
The problem you encountered is when your form shrunk down in size. In your screenshots above, initially it seems that the form is filling up the entire width of the container, but then at a certain breakpoint the form itself collapses to a column layout, reducing its overall width. Since the new width of the form is less than the width of the container, this gives our social elements room to “move up” back into the same line with the form. So the issue here is not with the technique you’re using, but rather the elements themselves. Notice what happens if I include a Text Element above my social buttons using my example:
This example works because my text is long enough to always fill up all the space in a row, forcing all items below it to the next “row.” If my text was too short, I could force the text container to be fullwidth by changing its Width value you see in that screenshot from auto to 100%. This works for something like text, but might not be as desirable for other elements (re-enter our button):
Notice that we’re using the 100% width technique to force our button to push all elements below down. This gives us our desired result for the social buttons as they will never be able to come back up in line with the button, but what if we want our button to keep it’s original form? This is where we can use a Line Element to make everything work as we want:
Here I have included a Line Element and made its width 100%, it has no max width, a height of 20px, and its color is transparent. This invisible, fullwidth line will always ensure that the space between your elements on top and social links below is kept, and the social links will never find their way back up in line with the element above. So if we substituted my button for your form in your previous screenshots, even when your form collapses to a column layout and has a max width placed on it, the social links would never come up because the invisible line we’ve included is being used as a barrier to section things out in the manner that we need. Also, giving the line a height to use as a spacer helps keep it clickable directly in the preview area, so you can get back to it easily and not have to inspect it from the Layout screen only.
Hopefully this helps to point you in the right direction and gives you some ideas for how you can achieve your designs moving forward.
Cheers!
