How do I fix the width of the phone number input fields

  • Profile Image
    Russ563
    Asked on March 07, 2015 at 08:54 AM
    3. The input field for phone numbers is smaller than the 10 digits in a number.
  • Profile Image
    Sean
    Answered on March 07, 2015 at 10:03 AM

    Please add this CSS code to  your form to adjust how the number field is shown

    #cid_96{height: 125px !important}
    #input_26_area{width: 60px !important;}
    #input_26_phone{width: 100px;}
    .form-sub-label-container:first-child{width: 80px !important;}

    Do let us know if further assistance is needed.

    Cheers!

  • Profile Image
    Russ563
    Answered on March 07, 2015 at 11:02 AM

    Does not fix the problem.

    It make the whole gray box a fixed width, which I don't want.

    And the number input field size didn't change.

    But worse yet, it made the input fields on the address question way too small just like the phone number fields.

  • Profile Image
    BJoanna
    Answered on March 07, 2015 at 11:29 AM

    Please try adding this code inside of your CSS:

    #input_25_full {

    width:125px;

    }

    It should like this.

     

    Let us know if you need further assistance.

  • Profile Image
    Russ563
    Answered on March 07, 2015 at 12:06 PM

    Yes, that fixes 1 of the 6 phone number fields, I should be able to fix the others myself.

    But I don't understand why it isn't automatic. With the input mask off, it is the right size, when the input mask is turned on, the field gets too small.

     

    Edit:

    All fixed.

    But now I noticed it does not require a 10 digit number (not sure if it did before), all that needs to be entered is 1 digit.

  • Profile Image
    BJoanna
    Answered on March 07, 2015 at 12:45 PM

    Sorry about that I did not notice that there are 6 number fields. Instead of previous code provided  insert this :

    #input_25_full, #input_27_full, #input_56_full, #input_63_full, #input_64_full, #input_89_full {width:125px;}

    This code will be applied to all 6 number fields. 

    Let us know if you need further assistance.

  • Profile Image
    Russ563
    Answered on March 07, 2015 at 01:15 PM

    All fixed.

    But now I noticed it does not require a 10 digit number (not sure if it did before), all that needs to be entered is 1 digit.

    And I don't understand why it isn't automatic.

  • Profile Image
    BJoanna
    Answered on March 07, 2015 at 01:56 PM

    Phone number fields which were impacted by CSS changes are tested one more time by us and we can enter only 10 digits in those fields. Phone number that have area code are only 'phone number' field in which you can add more then 10 digits. 

    And regarding your question why this options are not automatic, please understand that we weren't able to locate the glitch in the CSS that could be causing this problem with width/height of fields so we took another route of targeting those fields individually and Injecting Custom CSS for fixing problem. 

    Let us know if you need further assistance.

  • Profile Image
    Russ563
    Answered on March 07, 2015 at 03:14 PM

    I'm not looking to enter more than 10 digits, the problem is entering LESS than 10 digits.

    That makes it an incomplete phone number.

  • Profile Image
    jonathan
    Answered on March 07, 2015 at 05:00 PM

    In my understanding of the issue you were trying to tell us, it was actually the issue that you can still submit successfully the form even when the Phone field number of digits is not correctly validated according to the required number of digits set in the mask input.

     

    Example, in your jotform http://www.jotform.us/form/41748752369164, if you fill in less than 10 digit phone number in the Phone Number field, you can still complete the submission of the form -- when in actual, the Phone number is suppose to be invalid (did not meet required number of digits)

    If this is the issue you were reporting, you can correct this by enabling the option in the Mask Value property Fill Mask Validation .

     

    This will now prevent the submission if the Phone number field does not meet the required number of digits set in the Input Mask Value.

     

     

    Hope this help. Please let us know if still not resolved.

    Thanks.

  • Profile Image
    Russ563
    Answered on March 09, 2015 at 10:27 PM

    Thank you. I missed the 'Fill Mask Validation'.

  • Profile Image
    ashwin_d
    Answered on March 10, 2015 at 03:07 AM

    Hello Russ563,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!