DEV Community

Aatif G.
Aatif G.

Posted on

Customizing the Stubborn Int'l Phone <input>

#bootstrap #intltelinput #uiux #webdev

I was building a polished Bootstrap form including a phone number input, when Copilot suggested to use the popular intl-tel-input plugin:

document.addEventListener("DOMContentLoaded", function () {
    const input = document.querySelector("#Form_Phone");
    const iti = window.intlTelInput(input, {
        initialCountry: "pk",
        preferredCountries: ["pk", "sa", "tr", "ae", "bd"],
        separateDialCode: false,
        nationalMode: false, // forces international format
        autoHideDialCode: false, // keeps dial code visible
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});
Enter fullscreen mode Exit fullscreen mode

It looked nice initially but then I ran into a frustrating visual bug. The phone field looked misaligned despite using the same css for all other fields in the same form:

International phone number field

Not only that, the dial codes appeared scattered, and the dropdown seemed washed out when expanded:

Phone number field showing flags and dialing codes

It got even annoying when I tried to fix by applying d-flex, d-block w-100 and whatever to make it stretched.
Another problem was the scattered country codes, which I just hid by using:

const countryItems = document.querySelectorAll(".iti__country-list .iti__country");
countryItems.forEach(item => {
const dialCode = item.querySelector(".iti__dial-code");
if (dialCode) {
    dialCode.style.display = "none"; // hide dial code
}
});
Enter fullscreen mode Exit fullscreen mode

I somehow managed to clear up the scattered dialing codes:

country dropdown with no dialing codes

But the width issue was still there, I kept trying different CSS tweaks, Bootstrap classes to apply colour, enforce width, apply container box etc. but nothing helped.

The Breakthrough

Meanwhile I also realised that the dropdown is supposed to show country names as well, and those in my case were shown in white or too light, making them almost invisible. That was the reason dialing codes were "scattered", they were seen at random distance form their respective flags because of the long and short country names in between the flag and dialing code.

Now I was dealing with two challenges, readability and alignment to my form.

The One-Line Fix

After a long diagnostic chat with Copilot and some research, I figured the CSS class responsible for this:

.iti.iti--allow-dropdown {
    width: 100%;
    color:maroon;
}
Enter fullscreen mode Exit fullscreen mode

This small fix:

  • Forced full width alignment
  • Restored readable text color
  • Fixed the illusion of scattered dial codes

No wrappers. No hacks. Just clarity.

All fields showing same width

Width ✅

Country names readable

Readability ✅

Why This Matters

This bug wasn't just cosmetic — it undermined the user experience and made the form feel broken. And the fix wasn't just about layout — it was about visibility. By understanding how the plugin injects its markup and how inherited styles can silently break it, I was able to solve the problem at its root, using its own CSS class instead of applying generic wrapper or anything.

Sometimes, it is just one line - at the right spot.

Top comments (0)