This is on React Web Page, using the out of the box forms.

I think the only way we can address this is to decrease the margin on the inputs but this requires a perfect balance since this will compress the inputs. Any other approaches?

Thanks,

JC

Juan Carlos Elorde wrote:

This is on React Web Page, using the out of the box forms.

I think the only way we can address this is to decrease the margin on the inputs but this requires a perfect balance since this will compress the inputs. Any other approaches?

Thanks,

JC

Hi Juan,

You can override the following css class on your module theme:

.form .dropdow,
.form input[data-input],
.form [data-switch] {
    margin-bottom: var(--space-m);
}

to

.form .dropdow,
.form input[data-input],
.form [data-switch] {
    margin-bottom: 0;
}

That will do the trick.

Thank you.

Best regards,

Paulo Moreira

Solution

Hi Juan,

Beside doing what Paulo said. Even if I prefer to change to margin-bottom: var(--space-none);

You need to add a margin top to the form labels

.form label {

margin-top: var(--space-base);

}

@Edit I describe the normal solution in this forms since normally they have descriptions. Since in your case you don't use you can add the margin-top to 

.form .dropdow,
.form input[data-input],
.form [data-switch] {

Regards,

Marcelo

Solution

Paulo Moreira wrote:

Juan Carlos Elorde wrote:

This is on React Web Page, using the out of the box forms.

I think the only way we can address this is to decrease the margin on the inputs but this requires a perfect balance since this will compress the inputs. Any other approaches?

Thanks,

JC

Hi Juan,

You can override the following css class on your module theme:

.form .dropdow,
.form input[data-input],
.form [data-switch] {
    margin-bottom: var(--space-m);
}

to

.form .dropdow,
.form input[data-input],
.form [data-switch] {
    margin-bottom: 0;
}

That will do the trick.

Thank you.

Best regards,

Paulo Moreira

Hi Paulo,

Thanks but this is just what I said in my original question. We can reduce the margins but the form will end up compressed. I guess my goal is to have the validation just under the input like what we used to have before.

Regards,

JC


Marcelo Ferreira wrote:

Hi Juan,

Beside doing what Paulo said. Even if I prefer to change to margin-bottom: var(--space-none);

You need to add a margin top to the form labels

.form label {

margin-top: var(--space-base);

}

@Edit I describe the normal solution in this forms since normally they have descriptions. Since in your case you don't use you can add the margin-top to 

.form .dropdow,
.form input[data-input],
.form [data-switch] {

Regards,

Marcelo

Marcelo,

Yes, adding the top margin did it after removing the bottom margins.

Thanks,

JC