Оффлайн
- Регистрация
- 9 Май 2015
- Сообщения
- 1,480
- Баллы
- 155
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: ""
});
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:
Not only that, the dial codes appeared scattered, and the dropdown seemed washed out when expanded:
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
}
});
I somehow managed to clear up the scattered 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;
}
This small fix:
No wrappers. No hacks. Just clarity.
Width
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.
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: ""
});
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:
Not only that, the dial codes appeared scattered, and the dropdown seemed washed out when expanded:
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
}
});
I somehow managed to clear up the scattered 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;
}
This small fix:
- Forced full width alignment
- Restored readable text color
- Fixed the illusion of scattered dial codes
No wrappers. No hacks. Just clarity.
Width
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.