0

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
    });
});
steel
  • 11,883
  • 7
  • 72
  • 109
iCodeLikeImDrunk
  • 17,085
  • 35
  • 108
  • 169
  • 1
    Without access to your code or a [jsfiddle](http://jsfiddle.net/), all I can tell you is that it appears to be a z-index issue. – Brian Ray Oct 07 '13 at 21:47
  • @BrianRay http://jsfiddle.net/DtMwr/ here is the fiddle, im unable to get the images working, but you can see similar issue with the flag dropdown in there. – iCodeLikeImDrunk Oct 08 '13 at 13:27

2 Answers2

1

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.

iCodeLikeImDrunk
  • 17,085
  • 35
  • 108
  • 169
1

Why don't you use css?

Example:

.intl-tel-input{
z-index: 1000 !important; //!important overrides the inline-value
}
Soner Gönül
  • 97,193
  • 102
  • 206
  • 364
Alexander Behling
  • 11
  • 2