Problem with Adobe Muse tablet layout

  • tonycrowther
    Asked 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 Thread 1077024 Screenshot
  • Welvin Support Team Lead
    Replied on February 27, 2017 at 1: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.

  • tonycrowther
    Replied on February 27, 2017 at 2:24 PM

    Tried that - abosulutelt no difference.

  • David JotForm Support Manager
    Replied on February 27, 2017 at 3: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.

  • tonycrowther
    Replied on February 28, 2017 at 3: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.

    http://www.gemmacrowther.com/wedding/tablet/r.-s.-v.-p.html

     

    Problem with Adobe Muse tablet layout Image 1 Screenshot 20

  • Charlie
    Replied on February 28, 2017 at 6:00 AM

    I checked this on an emulator and was able to see the problem. Here's a screenshot of it:

    Problem with Adobe Muse tablet layout Image 1 Screenshot 20

     

    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" onDISABLEDload="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:

    https://developers.google.com/speed/docs/insights/ConfigureViewport 

    https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html 

     

    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.