How to Increase Spacing Between Country Code and Phone Number (Placeholder)

[AeroStar (Jonathan Tidwell)]

Good Day,

We are using Gravity Forms Advanced Phone Field. Everything is working great. However, in order to be consistent with all other GF fields, we’d like to increase the spacing between the Country Code/Flag Field and the “Phone Number” placeholder.

Details: Screenshot by Lightshot

We tried the CSS Rule provided below, but it only works for Country Codes with one digit (e.g, +1 for USA). When we select a Country Code with two or more digits, the spacing is lost.

Any takers to help solve us this issue? We’re publishing this topic in this forum to ensure current and future GF users benefit from the solution.

Hopefully, some of you can assist with this. Also, hoping that the developers of Gravity Forms and/or Gravity Wiz will make the proper CSS adjustments in their code to ensure consistency with all other GF fields.

Thank you!

---

#input_16_52_raw { 
    padding-left: 85px!important;
}

Where: 16 = GF Form No. and 52 = Form Field No.

[CraigTommola]

I took a look at the demo on the GW page and it appears that the 77px pad is an inline style.

In the inspector, I edited it to the 85px you suggested, but then I changed the country code, and the inline padding changed.

It’s always the dang JS … It would be ideal if they would append a class to the div.iti__flag-container indicating how many digits in the country code. Or something that would allow for granular control of all possibilities. Anything but an inline style.

[AeroStar (Jonathan Tidwell)]

Hey @CraigTommola,

Thank you for looking into this. Agree with you 100%.

Sooner than later, let’s hope the developers of this add-on will tweak its code to provide what we need.

Cheers,

Jonathan

[david (David (Gravity Wiz))]

Hey Jonathan, we’d be happy to explore this with you via support. Drop us a line.

[AeroStar (Jonathan Tidwell)]

Hey @david,

Great. We’ll reach out to you via your Support channels.

Hopefully, you already have a solution for this.

Thank you!

[david (David (Gravity Wiz))]

Hey @AeroStar, just shared this with you in your support ticket with us but wanted to share it here as well for others who may need it.

gravitywiz/snippet-library/blob/master/gp-advanced-phone-field/gpapf-preserve-default-padding.js