Form field widths aren't applied properly without triggering a content reflow

Ask the Community General Questions
1

***BUG

Currently, I have an elfsight form with customized input widths. The form is being rendered within a modal on my website, and the input widths are not being applied properly until the window is resized.

Form on website as default without window resize, should have custom input widths, not all be full width.

elfsight-form-on-website-screenshot
elfsight-form-on-website-screenshot2179×1303 143 KB

1 Like
3

Hello there @Cameron_Burrows :wave:

I am really sorry about this issue!

I’ve shared it with the devs and will get back to you tomorrow :slightly_smiling_face:

1 Like
4

Hi @Cameron_Burrows :wave:

We’ve noticed that you have 2 forms on your website where the issue occurs (Contact Form and Free Estimate Form).

To fix this issue, you need to replace the widgets’ installation codes with the scripts below:

Contact Form

<!-- Contact Form -->
<script
  src="https://static.elfsight.com/platform/platform.js"
  data-use-service-core=""
  defer=""
></script>
<script>
  const WIDGET_CLASS = 'elfsight-app-13050cb5-0bfd-43fe-9d38-8878dc66e27a';

  const currentScript = document.currentScript;

  const createWidget = () => {
    const widget = document.createElement('div');
    widget.classList.add(WIDGET_CLASS);
    currentScript.parentNode.insertBefore(widget, currentScript);
  };

  const intersectionObserver = new IntersectionObserver(
    ([{ isIntersecting }], observe) => {
      if (isIntersecting) {
        observe.disconnect();
        createWidget();
      }
    }
  );

  intersectionObserver.observe(currentScript.parentNode);
</script>

Free Estimate Form

<!-- Free Estimate Form -->
<script
  src="https://static.elfsight.com/platform/platform.js"
  data-use-service-core=""
  defer=""
></script>
<script>
  const WIDGET_CLASS = 'elfsight-app-f98481a3-d141-47be-a6ea-a027db4c6770';

  const currentScript = document.currentScript;

  const createWidget = () => {
    const widget = document.createElement('div');
    widget.classList.add(WIDGET_CLASS);
    currentScript.parentNode.insertBefore(widget, currentScript);
  };

  const intersectionObserver = new IntersectionObserver(
    ([{ isIntersecting }], observe) => {
      if (isIntersecting) {
        observe.disconnect();
        createWidget();
      }
    }
  );

  intersectionObserver.observe(currentScript.parentNode);
</script>

Try it out and let me know how it worked :wink:

1 Like
5

Hi Max, thank you for the prompt response and apologies in the delay in my response. I tested each of these code snippets, the Free estimate form resulted in a delay in the form rendering when the modal it was contained in launched, and also did not resolve the form field column issue. The one for the contact form resulted in the form not loading at all.

1 Like
6

Hi @Cameron_Burrows :wave:

Oh, I am really sorry about that!

I’ve passed your request to the devs and they’ll look further into it. I’ll keep you updated :slightly_smiling_face:

8

Hi @Cameron_Burrows :wave:

We’ve resolved the issue by using these codes in the Custom JS field on the Settings tab of your widget’s settings.

Contact-form:

const MODAL_ID = 'contact-modal';

function onOpenModal(mutationsList) {
  for (let mutation of mutationsList) {
    if (
      mutation.type === 'attributes' &&
      mutation.attributeName === 'aria-hidden' &&
      mutation.target.getAttribute('aria-hidden') === 'false'
    ) {
      window.dispatchEvent(new Event('resize'));
      break;
    }
  }
}

const modal = document.getElementById(MODAL_ID);

if (modal) {
  const observer = new MutationObserver(onOpenModal);
  observer.observe(modal, { attributes: true });
}

Estimate Form:

const MODAL_ID = 'estimate-modal';

function onOpenModal(mutationsList) {
  for (let mutation of mutationsList) {
    if (
      mutation.type === 'attributes' &&
      mutation.attributeName === 'aria-hidden' &&
      mutation.target.getAttribute('aria-hidden') === 'false'
    ) {
      window.dispatchEvent(new Event('resize'));
      break;
    }
  }
}

const modal = document.getElementById(MODAL_ID);

if (modal) {
  const observer = new MutationObserver(onOpenModal);
  observer.observe(modal, { attributes: true });
}

Please check your website and let me know how they work :slightly_smiling_face:

1 Like
9

Hi Max, I have checked out the forms on my website and can confirm the issue is resolved. I have been an elfsight customer for a while, and this is my first interaction with community support. I am extremely impressed with your responsiveness and the ability of the engineers to address this issue so quickly. Kudos.

2 Likes
10

@Cameron_Burrows Wow, your feedback has made our day! Many thanks for your kind words :heart:

We’ll definitely pass your feedback to the team and if anything else comes up, we are always here to help :wink: