Is it possible to enlarge timer dropdown size?

  • Profile Image
    abix
    Asked on April 26, 2019 at 07:25 PM

    Hello!

     

    Is it possible to enlarge the cell size? longer

     

    see Attachment

    Screenshot
  • Profile Image
    jherwin
    Answered on April 26, 2019 at 11:53 PM

    Do you mean like this (see screenshot below)?
    1556337117timer.png

    If yes, then please inject the custom CSS Code below to your form:

    .time-dropdown.form-dropdown {
        width : 60px!important;
    }

    Guide: How-to-Inject-Custom-CSS-Codes

  • Profile Image
    abix
    Answered on April 27, 2019 at 08:17 AM

    thank you so much,


    I'll ask you another question:

    if I wanted to put the two cells "from" and "to" next to each other, is it possible? I tried with the "contract" function, but in the mobile view the cells appear to be in a column.


    15563674311.JPG



  • Profile Image
    jherwin
    Answered on April 27, 2019 at 09:04 AM

    Do you also want to make the positioning to be like this when it's viewed using mobile?
    1556370184likethis.png
    Also, please tell us the device you're using so we can test it with the same device.

    Looking forward to your response.

  • Profile Image
    abix
    Answered on April 27, 2019 at 02:06 PM

    Yes, right! your image is perfect!!


    I would like it to be so the mobile view.


    i'm testing it with iphone 6s or iphone 7

  • Profile Image
    Mike_G
    Answered on April 27, 2019 at 06:41 PM

    To make the fields you are referring to appear next to each other when viewed on a desktop, you need to enable the Shrink option of both fields and have the Move to Next Line option of only the first one also enabled.

    You may use this guide as a reference to do that — How-to-Position-Fields-in-JotForm

    As for making the fields appear the same when viewed on mobile, please inject the following CSS codes to your form.

    @media screen and (max-device-width: 40em) {

    .form-col-1[data-type="control_time"], .form-col-2[data-type="control_time"], .form-col-1[data-type="control_time"] .form-sub-label-container, .form-col-2[data-type="control_time"] .form-sub-label-container, .form-col-1[data-type="control_time"] .form-sub-label-container:last-child, .form-col-2[data-type="control_time"] .form-sub-label-container:last-child {

        width: 43.275% !important;

    }

    }

    1556404830t18_39_23.png

    How-to-Inject-Custom-CSS-Codes

    I hope this helps. If you have other questions or concerns, please feel free to let us know.