DateTime Single widget is not displaying correctly in mobile device.

  • Profile Image
    completedj
    Asked on June 29, 2020 at 02:49 AM
    2) Do you know how to better fit the Single Date/time picker for mobile use, you can't see the last columns of days in the picker AND can't see the AM/PM of the times on my phone when testing. 
  • Profile Image
    ashwin_d
    Answered on June 29, 2020 at 03:07 AM

    I would suggest you to please inject the following custom CSS code in your widget and see if that solves the mobile view issue:

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

    .datepicker_header {

        width: 70% !important;

    }

    .datepicker_calendar {

        width: 73% !important;

    }

    .datepicker>.datepicker_inner_container>.datepicker_calendar>table {

        padding: 0px !important;

    }

    .datepicker>.datepicker_inner_container>.datepicker_calendar>.datepicker_table>tbody>tr>td {

        padding: 6px !important;

    }

    .datepicker_timelist {

        float: left !important;

        width: 22% !important;

        margin-left: -9px !important;

    }

    }

    The following guide should help you how to inject custom CSS code in your widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    Alternatively you can also check out our "Appointment" field and see if that fits into your requirement. Please check the screenshot below:

    1593414399appointment.png

    Hope this helps.

    Do get back to us if you have any questions. 

  • Profile Image
    completedj
    Answered on June 29, 2020 at 03:28 AM
    Okay excellent thank you, I will try both of the above options and see how
    we go:)
    ...