Datepicker is different on preview & mobile

  • Profile Image
    zapin
    Asked on December 02, 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 ?

  • Profile Image
    TREVON
    Answered on December 02, 2017 at 01: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"
          onload="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.

  • Profile Image
    zapin
    Answered on December 03, 2017 at 08:20 AM

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

  • Profile Image
    Nik_C
    Answered on December 03, 2017 at 11:18 AM

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

    1512317836Screen Shot 2017-12-03 at 5.21

    The field will show fine:

    1512317871Screen Shot 2017-12-03 at 5.21

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

    Thank you!

  • Profile Image
    zapin
    Answered on December 03, 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.

  • Profile Image
    Nik_C
    Answered on December 03, 2017 at 03: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.14

    Please check and let us know how it worked.

    Thank you!

  • Profile Image
    zapin
    Answered on December 04, 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 :)

  • Profile Image
    TREVON
    Answered on December 04, 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;
     
    }


  • Profile Image
    zapin
    Answered on December 04, 2017 at 12:24 PM

    Works perfectly. Thank you for great help and support.