SOLVED: Theme style Form field margin is form padding

[DesignBarn]

Bricks Version: 1.6.1
Browser: Brave
OS: macOS

When editing the Form element in theme styles the ‘field margin’ section seems to edit the overall form padding. The ‘tooltip’ says ‘padding’ too whereas the settings section is ‘field margin’.

When editing the form at individual element level the same options are there but the ‘field margin’ option does change the margin of each field.

Maybe I’ve misinterpreted the theme style option but this seems like a small bug.

ps. Also just noticed the ‘tooltip’ (text in the middle of the margin/padding circle that shows when you click right/left etc) in the individual form element also says padding where it should say margin.

Thanks,
Seamus

[timmse]

Hi Seamus,
Thanks so much for your report!

I think the labeling of “field margin” is misleading, as it adds space to the form group (the surrounding div of the input field). There must be a reason why padding is used instead of margin. Let’s see how we can improve this.

Best regards,
timmse

[mehmettuz]

Hi, I think this bug hasn’t yet figure out. I’m searching for half hour how can I make gap between fields.

[timmse]

Hey, That’s why the title still says “WIP” (Work in Progress)
Set the column width to e.g. 49% each and you’ll get a gap.

[John.R]

Elementor Forms introduce auto margins between fields in the same line, i.e. the way it is supposed to be.
Bricks form - Inline Fields - No Margin between fields or any options to set it. Fields touch each other in Bricks! How weird is that!

Elementor Form - Inline Fields

[John.R]

The margin between fields in the same line is essential, and there is no way to set it in Bricks.
Setting it as 49% or 45% as @timmse suggested doesn’t work, as the gap gets introduced in a weird way. (The gap gets introduced at the end of the second inline field - see screenshot - Top Right Corner of the form)
Bricks Form - Inline Fields

The margin between inline fields, like Elementor’s, is visually pleasing and serves a critical function of being able to differentiate between fields at a glance.

[timmse]

Hi John,
Welcome to the forum!

As already said, the task is in progress (WIP = work in progress). However, setting the first four fields to something like 49% and space-between still works (if you enable the “space-between” setting to create a space between).

Alternatively, with some custom CSS you can create an even column and row gap if you want.

Starting from the default form (it actually works for your form, too):

%root% {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

%root% .form-group:nth-last-child(2),
%root% .submit-button-wrapper {
  grid-column: 1 / -1;
}

[timmse]

PS: Another alternative solution that works fine for your form (and is even a bit simpler than the grid solution):

%root% {
  gap: 24px;
}

%root% .form-group:nth-child(-n+4) {
  width: calc(50% - 12px);
  max-width: 100%;
}

[John.R]

Thanks @timmse
I tried all your suggestions.

The custom CSS provided introduced uneven column and row gaps, thus not feasible.

The ‘space between’ option works best.
It creates equal column and row gaps, which is visually pleasing, and the way it is supposed to be, plus no hassles to input any custom code.

Cheers

[timmse]

@John.R

The custom CSS provided introduced uneven column and row gaps, thus not feasible.

This is not true. What causes this is probably the default margin-bottom, which of course you should set to 0.

@John.R

The ‘space between’ option works best. it creates equal column and row gaps…

This can’t be possible, because the margin bottom is fixed and the horizontal spacing is a percentage… but anyway, if one of the three solutions works for you, everything is fine.

[John.R]

@timmse Yeah, I should have said that ‘space-between’ creates ‘almost equal’ not ‘equal’ margins between rows and columns.
I stand corrected.

Equal is ideal, but ‘almost equal’ also works in this case, as visually the issue gets resolved. Cheers.

[timmse]

Hi guys,
To avoid confusion, we decided to rename the label from “margin” to “spacing” in Bricks 1.9.6, now available as a one-click update in your WordPress Dashboard. However, since we have not changed anything in the actual functionality, technically, it is still padding. Nevertheless, it should be less confusing now.

In addition, we have created another task to make it easier to create columns within the form. However, this is still a work in progress and will be included in a later version.

Changelog: Bricks 1.9.6 Changelog – Bricks

Best regards,
timmse