Drum roll folks… Padding and gap controls are here!
Container elements (groups, group focii, popups, etc.) will now have padding controls on all 4 sides, accessible in the Layout tab of its property editor. Padding defines space on the interior edges of a group (whereas margins define space on the outside of an element) and shrinks the amount of “usable” space for its child elements. This option is currently only available for responsive container layout types.
In addition, Row and Column container layout types will get Gap controls. Row containers will have row-gap and column-gap inputs, whereas Column containers will have row-gap inputs available in the Layout tab of the property editor. To enable these controls, check the “Apply gap spacing between elements” checkbox and the inputs will be available. Unchecking the checkbox will return any previous value to 0.
Row gap: This value defines a consistent vertical space between “rows” of child elements. Example: Column container with 40px of row gap between 3 child shape elements.
Column gap: This value defines a consistent horizontal space between “columns” of child elements (hence why this is not available in a Column container layout). Example: Row container with 40px of column gap between 3 child shape elements.
I read your RG remark too fast the first time because it didn’t sink in. I just realized no padding in Repeating Groups when messing around with new options. Anyway it’s high class problem for the moment given all the recent improvements As always wait & see for what’s next.
@nick.carroll About gap spacing Doesn’t seem to be working on Safari (iOS 15.4.1, latest safari update), FF 99.1 (9096) and Brave 1.37 (22.4.6.8) for iPhone… Is this something we can expect, or should we be using “manual” margins and padding instead for mobile?
Edit: was running an older OS, my bad.
I do apologize, after updating the phone OS to 15.4.1 everything is working fine on all three browsers. I thought that was my version, turns out it was prompting me to update. Thanks for the quick response!
But isn’t that weird that the same version of a browser would display the same css rules differently based on the phone’s os version? Or is that standard? Idk if anyone can answer that - idk that I really care, because it works, but I find it curious.
Hi, I just noticed when testing on an iPad that the Gap between columns or rows is not working properly, I use it in many places and elements are just sticking together with no gap space as I configured. I tried of course to add some margins and that works, but it means I have to remove the apply gap everywhere and add margins to do the same effect.
Thanks! I’ve been really enjoying using the new responsive engine. It’s so much faster and easier to use.
As always wait & see for what’s next.