What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Mobile Format issues with date/time fields

    Asked by beatsahead on November 12, 2015 at 05:31 AM

    My form at http://www.jotform.com/53061970978365 is responsive and looks pretty good except for the date fields, the time fields can't be seen and neither can any of the number fields.

    Can you let me know what css I should inject to correct this please?

    Mobile format JotForm number fields
  • Profile Image
    JotForm Support

    Answered by Charlie on November 12, 2015 at 11:31 AM

    Could you try adding this custom CSS code instead:

    @media screen and (max-width: 550px){

        /* first date time field */

        #cid_47 > span.allowTime-container {

            width : 40% !important;

            float: right !important;

        }

        #cid_47 > span.allowTime-container > span:nth-child(1) {

            width : 10% !important;

        }

        #cid_47 > span.allowTime-container > span:nth-child(2) {

            width : 40% !important;

        }

        #cid_47 > span.allowTime-container > span:nth-child(3) {

            width : 40% !important;

        }

        /* second date time field */

        #cid_211 > span.allowTime-container {

            width : 40% !important;

            float: right !important;

        }

        #cid_211 > span.allowTime-container > span:nth-child(1) {

            width : 10% !important;

        }

        #cid_211 > span.allowTime-container > span:nth-child(2) {

            width : 40% !important;

        }

        #cid_211 > span.allowTime-container > span:nth-child(3) {

            width : 40% !important;

        }

    }

    The CSS code above only changes the first two datetime field I saw in your form.

    You can check my cloned form here https://form.jotform.com/53153931823959?, see how it works on mobile devices. 

    Let us know if you still need more assistance on this.

  • Profile Image

    Answered by beatsahead on November 12, 2015 at 01:02 PM

    Thanks, thats much better for the date, but the length of party in hours box is still not showing on my phone, although it looks fine in the browser when shrunk

  • Profile Image

    Answered by Ben on November 12, 2015 at 03:13 PM

    I was not able to find the field with a label "length of party" so I presume that you mean the Music Start and Music End fields instead?

    Could you also tell us what is the phone (device and system as well as browser) that you are using so that we can try and recreate the same issue in order to see what might be causing it?

  • Profile Image

    Answered by beatsahead on November 15, 2015 at 08:19 AM

    Sorry the field which isn't displaying properly are the number fields.

    Hours of DJ time

  • Profile Image
    JotForm Support

    Answered by jonathan on November 15, 2015 at 01:42 PM

    I checked using your jotform https://www.jotform.com/53061970978365 on mobile browser, but I could not reproduce the same issue.

     

     

    I was able to see proper width of the field 'Hours of DJ Time' and I was able to use it as well.

    Can you please provide more details of how it was not displaying properly on your browser?

    You can also take a screenshot of it and include the image in your response here.

    Let us know if issue persist.

  • Profile Image

    Answered by beatsahead on November 15, 2015 at 01:53 PM

    This is how it looks on my phone, it's not possible to see how many hours in the box.

     

  • Profile Image
    JotForm Support

    Answered by jonathan on November 15, 2015 at 03:09 PM

    Can you please test again. I have added this CSS code to your form   as well

    #input_124 {

        height:20px !important;

    }

     

    When I check on my Android mobile browser, I was able to see it working properly.

    Please let us know if still not fixed. 

    Thanks.

     

     

  • Profile Image

    Answered by beatsahead on November 15, 2015 at 03:43 PM

    That's corrected the number field, but now the date is not formatted correctly. day month year fields take up all one line with time and date

     

  • Profile Image
    JotForm Support

    Answered by jonathan on November 15, 2015 at 05:03 PM

    The CSS code I have added should not affect the other field... so it is kind of weird.

    I have removed those CSS codes for now to restore the form to its previous state.

    Can you please share to us the kind of mobile device and browser you were using? 

    I will try test also on the same device/browser simulator.

    Thanks.

  • Profile Image

    Answered by beatsahead on November 16, 2015 at 04:04 AM

    It's a one plus android with chrome browser

  • Profile Image
    JotForm Support

    Answered by Welvin on November 16, 2015 at 08:36 AM

    I'm checking this now and I will let you know later.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on November 16, 2015 at 08:53 AM

    Check this form, http://www.jotform.com/form/53193084848969 and let me know if everything is alright.

    I have changed the custom mobile CSS codes to the following:

    @media only screen and (max-device-width: 550px) {

    #cid_47 > span:nth-child(1), #cid_47 > span:nth-child(2), #cid_47 > span:nth-child(3) {

        width: 15% !important;

        margin-right: 1% !important;

    }

    #cid_211 > span:nth-child(1), #cid_211 > span:nth-child(2), #cid_211 > span:nth-child(3) {

    width: 15% !important;

        margin-right: 1% !important;

    }

    #cid_47 > span.allowTime-container > span:nth-child(1) {

        width: 15% !important;

        margin-left: 5% !important;

    }

    #cid_211 > span.allowTime-container > span:nth-child(1) {

        width: 15% !important;

        margin-left: 5% !important;

    }

    div[id*=at_] {

        width: 100px !important;

        margin-left: 30% !important;

    }

    #input_124 {

        height:20px !important;

    }

    }

     

     

    Thanks