Cant scroll on ipad on wix website

  • Profile Image
    gcandiota
    Asked on September 30, 2015 at 07:12 AM

    The form works fine on my computer but I cant scroll down the form when using on my ipad mini (tried chrome and safari). I can scroll only to a certain part (like 50% of it). 

    Further to that, the fields are bigger than they should in the tablet. Any hints? Screenshot attached.

  • Profile Image
    erhan
    Answered on September 30, 2015 at 07:34 AM

    Hi,

    First of all, we are sorry for the inconvenience. You are currently using iFrame code to embed your form, and that causes the problem. Would you please try to embed your form by using embed code below?

    <script type="text/javascript" src="https://secure.jotformpro.com/jsform/52656300728960"></script>

     

    Please let us know if the problem still persists.

    Best.

  • Profile Image
    gcandiota
    Answered on September 30, 2015 at 09:38 AM

    Hi there!

    Its working better. Now its possible to scroll down, but with some difficulties cause I need to combine two different areas of scroll (sometimes in the middle of the form, others in the right of the page). And the fields are still expanding all the way to the right, diferent from the PC view. Any other suggestions? Thanks in advance!

  • Profile Image
    EltonCris
    Answered on September 30, 2015 at 12:20 PM

    Thanks for your reply.

    Do you mean to say you want to display both horizontal and vertical scroll bars on the form?

    Please take note that your form is mobile responsive. The form width and fields will automatically adjust when viewed on different devices. That's the reason why the fields expand on iPad.

    If you don't want the fields to expand on iPad, inject this CSS codes to you form. This should fixed it.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    input[type=text], input[type=email], input[type=tel], textarea, .form-sub-label-container, .form-buttons-wrapper button, .form-input  {

        width: auto;

       }

       input#input_55_addr_line1 {

        width: 310px;

       }

       .form-label.form-label-auto {

       width: 150px !important;

    }

    }

     

     

    Result:

    Hope this helps!