Adding Input Mask makes phone number field too small on mobile

  • SOLDIERFITSterling
    Asked on December 30, 2016 at 9: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.

  • BJoanna
    Replied on December 31, 2016 at 7: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.

    Adding Input Mask makes phone number field too small on mobile Image 1 Screenshot 20

    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.

  • SOLDIERFITSterling
    Replied on December 31, 2016 at 3:55 PM

    That worked perfectly! Thank you!