Forum Academy Marketplace Showcase Pricing Features

New Responsive: Padding and Gap Controls

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.
image (1)

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.
Screen Shot 2022-02-16 at 5.06.49 PM

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.

We hope this helps build cleaner responsive layouts, faster!

40 Likes

Indeed it will.
:+1:

Thanks @nickc this is awesome!

@nickc Awesome! :clap: Thanks! I’ve been really enjoying using the new responsive engine. It’s so much faster and easier to use.

2 Likes

Right?! Everything is so much easier now and making things responsive —> flawless!

2 Likes

Simply beautiful :fire:

1 Like

It’s awesome! :+1::+1::+1:

Wonderful!!!

I never seen any other application where updates and new features keep on coming and coming !!! keep it coming

Love it - would be super simple and easy to have a input field for all at the same time like figma did (just an idea)
Bildschirmfoto 2022-02-17 um 09.34.35

1 Like

Impeccable always improving :partying_face:

Amazing news, thanks @nickc !

Will padding be added to buttons as well in a near future? And in Repeating Groups?

5 Likes

YES finally ! Thanks <3

Solves a lot of issues. These are great!

1 Like

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 :slight_smile: As always wait & see for what’s next.

1 Like

I saw this appear in my editor today while building and I was so happy!
Thank you @nickc and team! :partying_face:

@nickc About gap spacing
image
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.

Gap spacing should work on safari ios as well. I just did a quick test on my phone and seems to work on my end. Might be worth a bug report?

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.

will padding and gap controls also come to repeating groups?

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.

Did anyone notice this?