SIGN UP

Padding Issue on International Phone Input Field

By: Dedi Thorne | Asked: 08/16/2024
Forums › Category: Code Snippets › Padding Issue on International Phone Input Field
0 Vote Up Vote Down
Dedi Thorne asked 4 months ago
As can be seen in the two attached screenshots, my phone number is hiding partway under the country flag.   I need to figure out How to move my placeholder text over for the phone field.  I've tried adding padding to several classes I've found in the Inspect element, but so far nothing seems to be working.  Anyone know what class I need to add padding to here? Or Margin if that would work better?   Thank you!
Attachments
Phone-Field.png
Phone-Field-Placeholder-only.png
2 Answers
0 Vote Up Vote Down
Victor Font answered 4 months ago
Do you know how to use your browser inspection tool? Use the tool to find the correct CSS and adjust it. There's very likely a CSS conflict happening between Formidable and your theme or another plugin that is overriding Formidable's CSS.
0 Vote Up Vote Down
Dedi Thorne answered 4 months ago

Updating this in case someone else should run into the issue.  My problem seems to have stemmed from trying various classes in this css.  When I just used the entire set, the padding was fixed.  I was also forced to use that annoying !important declaration on the first two lines because something was determined to override them..iti--allow-dropdown input.iti__tel-input, .iti--allow-dropdown input.iti__tel-input[type=tel], .iti--allow-dropdown input.iti__tel-input[type=text], .iti--show-selected-dial-code input.iti__tel-input, .iti--show-selected-dial-code input.iti__tel-input[type=tel], .iti--show-selected-dial-code input.iti__tel-input[type=text] {
padding-right: var(--iti-input-padding) !important;
padding-left: var(--iti-selected-country-arrow-padding) !important;
margin-left: 0;
}

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right