Date Picker is too small in "All questions in one page" layout, on mobile and tablets

  • Profile Image
    Mallfox1
    Asked on November 27, 2017 at 12:33 PM

    Greetings, I've been building a form for a project of a potential customer and i have encountered difficulties witht the size of the date picker on mobile phones and tablets, especially on Android ones. 

    Is there any way to make the date picker, in the "all questions in one page" form layout, bigger? Better yet, if it is possible to go full screen when the date icon is tapped.

    The form in question is this https://form.jotformeu.com/73121870084351 

    The screenshot i provided features the preview of both the mobile phone and the tablet in the same screen. 

    Also, please inform me if i can ask a few semi-related questions about the same form in the same thread, or should i start a new thread with the specific question? 

    Thank you very much for your time

  • Profile Image
    TREVON
    Answered on November 27, 2017 at 02:06 PM

    I have tested your form and the following CSS code works with in increasing the size of your date-picker. Kindly inject the code below to your form.

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

           {

              table {
                          width: 130% !important;
                          max-width: initial !important;
                      }

                 }

           }

    1511809572Form phone.png

    On the other issue of opening a separate thread, we normally recommend opening a separate thread if we are addressing separate issues.





  • Profile Image
    Mallfox1
    Answered on November 28, 2017 at 05:50 AM

    Thank you very much, i injected the CSS and it worked as in the screenshot. On the preview for the tablets it still seems kinda small though. Regardless, I've notified my potential client to review the new dimentions of the date picker and hopefully it will be satisfactory. 

    Thank you very much for your help 

  • Profile Image
    TREVON
    Answered on November 28, 2017 at 08:52 AM

    Thank you for the response. In case you need to increase the size of the date-picker on tablets kindly inject the following css code.

    div.calendar table {
        width: 142% !important;
        max-width: initial !important;
    }

    In the meantime we will await a response from you on the same.

  • Profile Image
    Mallfox1
    Answered on November 28, 2017 at 08:57 AM

    Greetings, i have injected the CSS code that you gave me, and i am awaiting input from my potential client. 

    Thank you very much for your help