Preview before submit widget: full time field's value are not shown on preview

I have created a job sheet confirmation form but Im facing some issues.

1st. It does not look with labels arranged in line on top

2nd. When I press the preview button, it doesn't show the whole time spot

3rd. When I press the preview button, I can't see the submit button that should be below back button

I usually use the form with my Samsung phone device as it has to be completed in front of customer. 

The form is embedded on my website via https://www.allmove.co/jobsheet-form

Please see the pictures attached.

---

Regards,

valy

Hello Valy - I was able to replicate the issue on my end. Let me have some more time to check on this and get back to you here for a possible solution.

Thank you for waiting!

Please try adding this custom CSS code to your form and see if that'll resolve it:

@media screen and (max-width: 480px){

#previewContainer li>div img {

    height: 150px!important;

}

}

GUIDE: Adding-Custom-CSS-in-JotForm 

It still has a problem of showing the whole time spot 

Let me have some more time to test that as well. I'll get back to you here shortly.

Thank you for waiting! It looks like a bug with the Preview widget. I was able to replicate the issue on my end. I even tried adjusting the width of the field but to no avail.

I have endorsed this now to our backend team for further investigation. We'll let you know here for updates.

Apologies for this inconvenience.

We are sorry for the inconvenience caused to you. We have updated the widget and the problem has been resolved. Please check out the widget once again and let us know if the issue persists. Thank you for reporting the issue.

Regards,

Widgets Team

Hi there,
I have tried again but nothing changed! 2 issues are still there when the mobile device is used to fill the form.
1st issue: the button submit is still hidden when the form is in preview mode;
2nd issue: the time slot cant be seen properly when the form is in preview mode.
...

Hi there,

Apologies for the inconvenience, I cloned and tested the form and it seems that the issue still persists:

I will forward this information to our backend team for further testing.

Thank you for your patience.

Best.

Everything works right on my end and I can't see any issue. Please clear your browser's cache or test the form on private/incognito mode in order to see the changes. If you see the issue again after that please share a screenshot and we will check it again. Thank you.

The submit button stil not showing when preview.---Kindly regards,Allmove & CoRecruitment team
...

We are sorry to let you know we are unable to replicate the issue at our end on a PC and an iPhone emulator. As we tested your form the Submit button is displaying normally in the preview.

Please check again using a different device and get back to us with the screenshot if the issue to check further.

Thanks!

Ok, I've used my wife iphone and the issue is still there. I have checked the desktop side and it works ok. But on phone devices it is not working properly as the submit button cant be seen. I also cleared all cache and everything from my phone browser and also from my business application but the issue still persists. This form is embedded on my website with iframe, this is the only one way the forms to be embedded on my website pages.
My concern is this form is going to be used on mobile devices to the customer site after the jobs are done. I do not use it but only my employees on customers sites.
Please check the form via https://www.allmove.co/jobsheet-form , making a test with any mobile device, to see what I mean.
Thanks,
Valy
...

Hello Valy - I was able to replicate the issue. Let me conduct a few more tests and get back to you here with a solution.

Hello Valy - It seems that the iframe's height auto-adjust script is in conflict with scripts you have on the webpage.

I suggest setting a fix iframe height instead and see if that'll resolve the issue.

Please try re-embedding the form using this code below:

<iframe 

id="JotFormIFrame-91791353567366" 

title="JOB SHEET CONFIRMATION" 

onDISABLEDload="window.parent.scrollTo(0,0)" 

allowtransparency="true" 

allowfullscreen="true" 

allow="geolocation; microphone; camera" 

src="https://form.jotformeu.com/allmoveco/job-sheet-form" 

frameborder="0" 

style="

min-width: 100%;

height:1555px;

border:none;" 

scrolling="no">

</iframe> 

Please try that and let us know how it goes.