How do you fix where the minute block is not outside the right margin?

  • Profile Image
    Freezethemoment4ever
    Asked on February 17, 2017 at 02:44 PM

    I have been having this issue for a couple weeks now. Every time a client tries to complete the form via mobile, the time block is all the way at the far right of the page to where it cannot be seen unless some phones allow it to be scrolled over. It is a requirement for my business to have the time stamp there so this error is quite a pain now allowing flexibility for people to use it since I am having to explain to them that this is a problem with the form provider. Is there a way to repair this? Is this something that happened with the update to Jotform v4 or what?

  • Profile Image
    BDAVID
    Answered on February 17, 2017 at 05:37 PM

    Which of the two forms you have is showing this issue?

    http://www.jotform.us/form/62839170417156 

    http://www.jotform.us/form/63327368478165 

    I checked both, and could not locate the field called "Session Date & Time". However, I see the date fields does not display well on mobile view.

    Please try injecting the following code to solve the issue: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    [data-type="control_datetime"] .form-input span:first-child{

    width: 100px;

    }

    #sublabel_month{

    width: 50px;

    margin-left: 15px !important;

    margin-top: -16px !important;

    }

    [data-type="control_datetime"] .form-input span:first-child +span{

    width: 100px;

    }

    #sublabel_day{  

    width: 50px;

    margin-left: 15px !important;

    margin-top: -16px !important;

    }

    [data-type="control_datetime"] .form-input span:first-child +span+span{

    width: 100px;

    }

    [data-type="control_datetime"] .form-input span:first-child +span+span+span{

    width: 210px;

    }

    [data-type="control_datetime"] .form-input span:first-child +span+span+span+span{

    width: 50px;

    }

    [data-type="control_datetime"] .allowTime-container span:first-child{

    width: 50px !important;

    }

    [data-type="control_datetime"] .allowTime-container span:first-child +span{

    width: 50px !important;

    }

    [data-type="control_datetime"] .allowTime-container span:first-child +span+span{

    width: 50px !important;

    }

    [data-type="control_datetime"] .allowTime-container span:first-child +span+span+span{

    width: 50px !important;

    }

    }

    Result: https://form.jotform.com/70476299249975?jumpToPage=2 

    Let us know if you need more help.

  • Profile Image
    Freezethemoment4ever
    Answered on February 17, 2017 at 05:44 PM

    It is on form http://www.jotform.us/form/62839170417156; however, I had to separate the date from the time since I had a client trying to access the form today and sign it. I will make the change back and try the code, though I never had this problem earlier with this form since my last two clients have complained about it. Just curious on why it would happen now and not earlier. There is a spot further down under the section of "Events" that it still does the error in not being in the margins if the date and time are put together in the same block. I am not familiar with codes, so if it is an issue, I will reach out again.

  • Profile Image
    Freezethemoment4ever
    Answered on February 17, 2017 at 05:51 PM

    It worked! At least on Android mobile devices. I will have to test if it works for an Apple mobile device as well. Thank you.