Troubleshooting
Contents
General
Full-width input
If you want your input to be full-width, you need to set the container to be the same, i.e.
.iti { width: 100%; }
Dropdown container not closing on scroll
If you are using the dropdownContainer option and you have a scrolling container other than window which is causing problems by not closing the dropdown on scroll, simply listen for the scroll event on that element, and trigger a scroll event on window, which in turn will close the dropdown, e.g.
scrollingElement.addEventListener("scroll", () => {
window.dispatchEvent(new Event("scroll"));
});
Input margin
For the sake of alignment, the default CSS forces the input’s vertical margin to 0px. If you want a vertical margin, you should add it to the container (with class iti).
Placeholders
To get the automatic country-specific placeholder numbers, simply omit the placeholder attribute on the <input>, or set autoPlaceholder to "aggressive" to override any existing placeholder. Note: this requires the utils script to be loaded.
JavaScript plugin specifics
The following issues only apply to the JavaScript plugin — the framework components handle them for you.
Displaying error messages
If your error handling code inserts an error message before the <input>, it will break the layout. Instead, you must insert it before the container (with class iti).
Dropdown position
The dropdown should automatically appear above/below the input depending on the available space. For this to work properly, you must only initialise after the <input> is in the DOM.