SOLVED IN 1.4: Wrong padding on form groups

Bricks Version: 1.4RC

Hi all,

I found out several issues with form field groups padding:

  1. No hozirontal padding should be added to form groups, as they interfere with spacings and alignments:

  1. When setting a custom bottom padding, padding is also applied to submit button (overrides the zero default padding), which is wrong:

  1. Spaces between form groups should actually be margin and not padding.

This CSS fixes all:

.brxe-form .form-group {
    padding: 0;
}
.brxe-form .form-group:not(:last-child) {
    margin-bottom: 1em; /* Or margin: <margin_settings_from_builder> */
}
2 Likes

Hi Yan :blush:

  1. Confirmed!
  2. Confirmed!
  3. Personally agreed, but I’m not sure if it’s an assignment error or whether there are certain reasons for it. However, I’ve mentioned it as well.

Best regards,
timmse

1 Like

Shouldn’t field spacing be defined using margins and not padding?

1 Like

We’ll remove the default horizontal field padding, and ensure that the “Field Margin” is not applied to the submit button.

Using padding instead of margin for the field “spacing” is necessary to allow for multiple fields in the same row + spacing.

Example: Set the width of your first two form fields to 50%, and set a horizontal spacing to 10px. If we’d use margin instead of padding the second field will break onto a new line as you can see in the screenshot below:

3 Likes

OK I was talking about vertical spacing, had not thought of horizontal :wink:
I actually use this CSS for forms spacings, so it’s still working good because manual left/right margins still use padding:

.brxe-form .form-group {
    padding: 0;
}
.brxe-form .form-group:not(:last-child) {
    margin-bottom: 1em;
}
@media screen and (max-width: 479px) {
    .brxe-form .form-group {
        width: 100% !important;
    }
}

I actually don’t use horizontal spacing at all because I use like 49% each side, which leaves a 2% gap :wink:

The thing with manual padding is that when you stack form groups on mobiles with width 100%, padding is still applied, so we need to remove it as well:

But it is OK, we have several workarounds/solutions, CSS or percentages or manual :slight_smile: