Datepicker is different on preview & mobile

  • zapin
    Asked on December 2, 2017 at 10:41 AM

    This is link to one of my pages where you can see the problem :  https://sparmad.com/bager/


    I´ve noticed that the time field in the date picker stands incorrect on the site, but not when I see it in jotform, can I correct this also ?

  • TREVON
    Replied on December 2, 2017 at 1:17 PM

    Apologies for any challenges you are facing. Seen you have embedded your form using Iframe. Would you kindly try embedding your form to your site with the iframe code below that has javascript removed.

    <iframe
          id="JotFormIFrame-73353235943357"
          onDISABLEDload="window.parent.scrollTo(0,0)"
          allowtransparency="true"
          src="https://form.jotformeu.com/73353235943357"
          frameborder="0"
          style="width: 1px;
          min-width: 100%;
          height:2092px;
          border:none;"
          scrolling="no">
        </iframe>


     https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

      Kinly do let us know if this resolves the issue.

  • zapin
    Replied on December 3, 2017 at 8:20 AM

    I tried embedding your text, but doesn`t seem to work. Any other way I can try to solve my problem ?

  • Nik_C
    Replied on December 3, 2017 at 11:18 AM

    If you remove the media query block from your Custom CSS Field:

    1512317836Screen Shot 2017 12 03 at 5 Screenshot 10

    The field will show fine:

    1512317871Screen Shot 2017 12 03 at 5 Screenshot 21

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

    Thank you!

  • zapin
    Replied on December 3, 2017 at 11:40 AM

    Thank you, it solved the problem on pc, but when accesing the page from phone, it still stands incorrect in the time area on the date picker, I hope you are able to help me solve that issue also.

  • Nik_C
    Replied on December 3, 2017 at 3:10 PM

    Ok, that's good.

    Regarding the mobile, I removed this code from your form: 

    select#hour_32{

      position: absolute!important;

      margin-left: -35px!important;

      

    }

    select#min_32{

      position: absolute!important;

      margin-left: -73px!important;

    }

    And added this code:

    @media only screen 

    and (max-device-width : 667px) { 

      select#hour_32 {

        width: 50px!important;

    }

    select#min_32 {

        width: 50px!important;

    }

    }

    And it should look like this:

    1512331749Screen Shot 2017 12 03 at 9 Screenshot 10

    Please check and let us know how it worked.

    Thank you!

  • zapin
    Replied on December 4, 2017 at 11:19 AM

    It look as you describe on mobile now, on the form you changed, but then I´m back to having a problem on pc, here it shows wrong again unfortunately. Hopefully you still have some ideas left :)

  • TREVON
    Replied on December 4, 2017 at 12:11 PM

    Apologies for any inconveniences caused.

    Would you kindly find this CSS code if your for (I think line 30 )

    img#input_32_pick{
      position: absolute;
      margin-left: 180px !important;
      margin-top: -35px!important;
     
    }

    and replace it with this code. Tested and working well in my phone and Laptop.

    img#input_32_pick{
      position: absolute;
      margin-left: 60%!important;
      margin-top: -35px!important;
     
    }


  • zapin
    Replied on December 4, 2017 at 12:24 PM

    Works perfectly. Thank you for great help and support.