- tonycrowtherAsked on February 27, 2017 at 11:55 AM
I am using the same RSVP/Contact Form on both a PC version and a tablet version of a website. I have done this many times before. This time however it will not align properly on the tablet - it always aligns to the centre of the page, thus projecting way out to the right. At 520px wide it should fit easily. It should sit tight to the left have margin of the page and therefore fit within the page width. Attached screenshot shows the problem.
- JotForm SupportWelvinAnswered on February 27, 2017 at 01:22 PM
Please try re-embedding the form using our iframe embed method: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. There seems to be a conflict on the page that's causing the problem on iPad. The iframe will isolate the form from the page preventing the conflict.
This is the iPad page: http://gemmacrowther.com/wedding/tablet/r.-s.-v.-p.html.
Let us know if the issue persists.
- tonycrowtherAnswered on February 27, 2017 at 02:24 PM
Tried that - abosulutelt no difference.
- JotForm SupportBDAVIDAnswered on February 27, 2017 at 03:56 PM
I am not understanding what the problem is, the picture you uploaded does not illustrate the problem.
Please load the link of this thread in your browser: https://www.jotform.com/answers/1077024
Then take a screenshot of your iPad: https://support.apple.com/en-us/HT200289
You can even draw on the image to illustrate what is not fitting well, and where the form should be positioned: http://osxdaily.com/2017/02/13/markup-write-draw-photos-ios/
Finally, upload it to this thread: https://www.jotform.com/answers/414264-How-to-include-screenshot-image-in-the-support-forum
Let us know if you need more help.
- tonycrowtherAnswered on February 28, 2017 at 03:48 AM
My original screenshot wasn't clear - the attached illusttrates the problem. The contact form aligns it's top left corner with the centre of the page, and hangs way out to the right, hence xooming the page out so it all goes small. I cannot get it to keep over to the far left and thus fit on the page.
- CharlieAnswered on February 28, 2017 at 06:00 AM
I checked this on an emulator and was able to see the problem. Here's a screenshot of it:
The problem is more related on the relation of your child and parent elements. The iframe has a width set to 100%, however, it sees the actual screen size rather than the parent element.
You could try setting the width of the iframe to "inherit" instead of 100%.
<iframe id="JotFormIFrame-70512987831967" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/70512987831967" frameborder="0" style="width: inherit; height: 1152px; border: none;" scrolling="no"> </iframe>
I advised checking the responsive layout of the template or Adobe Muse. You can also check the following viewport configurations:
Creating different layouts for specific devices might be complicated, if that is the case it might not work on all types of devices. I am not entirely sure how it is done in Adobe Muse, but the viewport should already be enough to make it somewhat responsive.
I hope that helps.