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

**URL:** <https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606>\
**Category:** Get Help\
**Tags:** columns, spacer, gfield\
**Created:** [October 10, 2022, 3:19pm UTC](https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606 "2022-10-10T15:19:29Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![user61aa244c904a0145](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@user61aa244c904a0145](https://community.gravityforms.com/u/user61aa244c904a0145)\
**Post date:** [October 10, 2022, 3:19pm UTC](https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606/1 "2022-10-10T15:19:30Z")

</div>

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!

 ![Screen Shot 2022-10-10 at 17.16.21](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/e/e260795edc3238e459d723760c693b4b0a51f653.jpeg)

---

<div class="post-metadata">

**Author:** ![sacom](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/sacom/32/53_2.png) [@sacom](https://community.gravityforms.com/u/sacom)\
**Post date:** [October 10, 2022, 3:47pm UTC](https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606/2 "2022-10-10T15:47:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![user61aa244c904a0145](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@user61aa244c904a0145](https://community.gravityforms.com/u/user61aa244c904a0145)\
**Post date:** [October 10, 2022, 4:03pm UTC](https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606/3 "2022-10-10T16:03:21Z")

</div>

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.

 ![Screen Shot 2022-10-10 at 18.02.02](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/6/6f358b67747ec652cf452cbb412284b1b7e59ee0.jpeg)

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

 ![Screen Shot 2022-10-10 at 18.01.25](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/7/76e82667046795bfb2b7af6ef7b1578188344700.jpeg)

Thank you in advance for any feedback!

---

<div class="post-metadata">

**Author:** ![sacom](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/sacom/32/53_2.png) [@sacom](https://community.gravityforms.com/u/sacom)\
**Post date:** [October 10, 2022, 4:38pm UTC](https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606/4 "2022-10-10T16:38:09Z")

</div>

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](https://www.gravityforms.com/open-support-ticket/technical/) for further assistance. Be sure to include a export of the form.

---

<div class="post-metadata">

**Author:** ![user61aa244c904a0145](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@user61aa244c904a0145](https://community.gravityforms.com/u/user61aa244c904a0145)\
**Post date:** [October 10, 2022, 5:02pm UTC](https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606/5 "2022-10-10T17:02:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![user60d58e53265d0429](https://avatars.discourse-cdn.com/v4/letter/u/ccd318/32.png) [@user60d58e53265d0429](https://community.gravityforms.com/u/user60d58e53265d0429)\
**Post date:** [October 11, 2022, 12:37pm UTC](https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606/6 "2022-10-11T12:37:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![uamv](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/uamv/32/1412_2.png) [@uamv](https://community.gravityforms.com/u/uamv)\
**Post date:** [October 11, 2022, 3:32pm UTC](https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606/7 "2022-10-11T15:32:05Z")

</div>

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**.

```auto
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();
        }
    }
}

```

1. 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**.
2. Now, click **Save Form** to save your form.

At this point, the spacers should be removed.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/f/fef63f0599c45e0218c30d9f5d7ca8bff9b00189.png) [@system](https://community.gravityforms.com/u/system)\
**Post date:** [November 10, 2022, 3:32pm UTC](https://community.gravityforms.com/t/spacer-with-classes-spacer-gfield-why-is-it-appearing/13606/8 "2022-11-10T15:32:14Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.