Need help aligning the phone number field

  • Profile Image
    yardneyfilters
    Asked on March 02, 2018 at 08:56 PM

    I have an entry for an international phone number and it breaks into two lines. The space allowed for the country code is way too big, as is the area code space. How do I fix this?


    1520042102Screen Shot 2018-03-02 at 5.52

  • Profile Image
    Jim_R
    Answered on March 03, 2018 at 03:28 AM

    Your form has a lot of CSS codes that don't do any changes to your form per se. These codes also cause the misalignment of the second phone field. My recommendation is to remove all the codes on your FORM BUILDER, then inject the ones shown below:

    .form-label {

      white-space: nowrap;

    }


    .phone-separate {

      display: none;

    }


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

      width: 24%;

    }


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

      width: 34%;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes

    Result: