How can I get the progress bar to be fixed at the top in iFrame?

How can I get the progress bar to be fixed at the top in iFrame?

Here is my form - https://form.jotform.com/201172314849049

It works fine in Jotform but not in the embed. 

Here is where it is embedded - https://www.deployuk.com/induction-form

Thank you.

Jack

You can embed your form using the stripped iFrame embed code:

<iframe id="JotFormIFrame-201172314849049" title="Registration & Induction - Deploy UK" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/201172314849049" frameborder="0" style=" min-width: 100%; height:500px; border:none;" scrolling="yes" > </iframe>

I adjusted the following:

- Reduce the value of the height attribute to about 500px
- Change the value of the scrolling attribute from no to yes

Please give it a try and let us know how it goes.

Thanks for getting back to me.

It doesn't seem to have worked and now the progress bar is spilling over the form as well.

(screenshot)

Cant seem to get it back. Sorry, looks like another problem has arisen,

Any suggestions to fix both issues??

Thanks

Can you please try to add following CSS to your form:

.progressBarContainer.fixed {
  left: 0;
}

You can click here to see how to inject CSS directly into your form.

Let us know if this resolved your problem.

Thank you. That has sorted the overflow issue.

Still not been able to get the progress bar to be fixed at the top though:

https://www.deployuk.com/induction-form

Thanks

The progress bar on your page is fixed, however, since you are using iFrame the whole form is displayed at one. Problem is that you are not scrolling the form itself, where the progress bar is fixed, you are scrolling your whole page. 

To resolve this problem, you need to reduce the size of the iFrame so the scroll bar is shown inside the form. As long as the form is scrolled, the progress bar will be fixed. When you come to the end of a form, and start to scroll your page, the progress bar will start scrolling as well.

You can use the code from my colleague's reply to update the height of the iFrame.

If you don't like this solution, you could download the whole source code of the form, and place it directly on your page. This way, you won't be using an iFrame, and the form will be displayed directly on your page, which should fix the progress bar.

Please let us know if this solution works for you. 

Thank you!

That has worked excellently. Really appreciate it