Adding Input Mask makes phone number field too small on mobile

  • Profile Image
    SOLDIERFITSterling
    Asked on December 30, 2016 at 09:23 PM

    After adding the input mask and validation so my customers can only put in numbers and at least 10 in the field the field is too small to read what was put in when looking at on a mobile device. I assume this has something to do with mobile responsiveness as the field is fine on a computer. I've tried changing the width of the field with custom CSS code but to no avail.

  • Profile Image
    BJoanna
    Answered on December 31, 2016 at 07:13 AM

    I have tested your form and I was able to replicate mentioned issue. 

    Please add this CSS code to your form:

    [data-type="control_phone"] .form-sub-label-container:first-child {

        width: 100%!important;

    }

    How to Inject Custom CSS Codes

     

    After that you form should look like this on mobile devices.

    Here is my cloned form with mentioned CSS code:

    https://form.jotform.com/63653402459963

    Feel free to test it and clone it.

    Hope this will help. Let us know if you need further assistance.

  • Profile Image
    SOLDIERFITSterling
    Answered on December 31, 2016 at 03:55 PM

    That worked perfectly! Thank you!