Yao Chen Yao Chen - 7 months ago 35
Javascript Question

Working with Bluefieldscom intl-tel-input, how can I make the flag dropdown not overlap with other inputs?

screenshot here

As you can see from the screenshot, I have 3 inputs and when I click the first one, the flags for the 2nd and 3rd input will be on top of the 1st dropdown's list.

How can I make this dropdown to be "on top" or make the other stay in the background?

Below is the jsfiddle link:

http://jsfiddle.net/DtMwr/

$(function() {
$("#p1").intlTelInput({
preferredCountries:['US', 'CA', 'AU', 'BR', 'SG', 'DE', 'NL', 'RU', 'IE'],
americaMode: false
});
$("#p2").intlTelInput({
preferredCountries:['US', 'CA', 'AU', 'BR', 'SG', 'DE', 'NL', 'RU', 'IE'],
americaMode: false
});
$("#p3").intlTelInput({
preferredCountries:['US', 'CA', 'AU', 'BR', 'SG', 'DE', 'NL', 'RU', 'IE'],
americaMode: false
});
});

Answer

This was indeed caused by a z-index issue.

I was looking at the z-index of the wrong element(the ul).

Below is the code I used to fix my issue:

var z = 1000;
$.each($(".intl-tel-input"), function() {
    this.style.zIndex = z;
    z--;
});

.intl-tel-input is the new div that is created when the dropdown input was created.