Spacer with classes "spacer gfield" - why is it appearing?

[user61aa244c904a0145 (Marimar Hollenbach)]

Hi everyone! I am seeing a div appear with the classes “spacer field” which is creating unwanted misalignments in my form. I am not able to select it and delete it as if it were a field-type element.

Any idea of why this is happening, and how to remove it?

Thank you in advance!

[sacom (Samuel Aguilera (Gravity Forms))]

That’s part of the column layout. I guess you have moved the Marketing Legends field to the right column in the form editor.

[user61aa244c904a0145 (Marimar Hollenbach)]

Hi Samuel, thanks for the quick reply! My colleague moved the fields around and this spacer appeared, and we are not able to get rid of it.

I tried stacking all the fields in one column and I still see the space e.g.

This is also happening on a second form (with read-only fields):

Thank you in advance for any feedback!

[sacom (Samuel Aguilera (Gravity Forms))]

Are you able to replicate the issue displaying the form using the Preview button in the form editor? If so, I would recommend you to create a support ticket for further assistance. Be sure to include a export of the form.

[user61aa244c904a0145 (Marimar Hollenbach)]

I can replicate it preview - I will create a support ticket. Thank you.

[user60d58e53265d0429 (Wesley Nooijens)]

Same problem here. After moving around some fields I get these spacers. Cannot remove them

[uamv (Joshua Vandercar (Gravity Forms))]

Those spacer elements are used as placeholders when fields don’t utilize the full column grid on a row. They are often added when fields are resized and are usually removed when a field no longer requires such layout spacing – but can sometimes get orphaned due to conflicts (maybe with a plugin, browser extension, etc.).

They can sometimes be removed by toying around with the column layout for the surrounding fields.

I’ve also used the following method to directly dissociate them from the preceding fields and remove them from the form.

This requires running a small bit of javascript in your browser console while viewing the form editor. This has worked every time I’ve used it, but since we’re directly interfacing with the form object, as a precautionary measure it might still be good to make a quick backup before proceeding.

1. Open the form editor for the form.
2. Open your browser’s console.
3. Paste the following code, then hit Enter.

var removeOrphanedSpacersAfter = Number(window.prompt('Remove orphaned spacer after which field ID?'));

for ( let i = 0; i < form.fields.length; i++ ) {
    if ( form.fields[i].id == removeOrphanedSpacersAfter ) {
        let orphanedSpacer = document.getElementById(`field_${form.fields[i].id}`).nextElementSibling;
        if ( orphanedSpacer.classList.contains('spacer') ) {
            form.fields[i].layoutSpacerGridColumnSpan = 0;
            orphanedSpacer.remove();
        }
    }
}

4. Read the prompt and enter the field ID of the field which precedes the spacer and for which you are wanting to dissociate the spacer, then click OK.
5. Now, click Save Form to save your form.

At this point, the spacers should be removed.