Country Dropdown Hidden Mobile

[ryanatearth]

Steps to reproduce

1. Go to: https://xyz.petcurious.com/dogs-and-puppies-for-adoption/ u: test pw: test
2. Click on "Set Alert"
3. Click on the country flag drown

Expected behaviour

On desktop this is fine. I've tested with newest version of Chrome and Safari.
On mobile chrome and safari, the dropdown element is being appended to the element and then by default is 'behind' the modal that pops up, so unusable.

Actual behaviour

Expected behavior is to have the dropdown positioned following the '#phone' element and visible to be usable.

Initialisation options

  let phone_field = document.querySelector("#phone");
  phone = window.intlTelInput(phone_field, {
    preferredCountries: ["us", "ca"],
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
  }); 

I've also tried with the options:

dropdownContainer: document.getElementById('phone')
dropdownContainer: document.getElementById('we_search_modal')

Not sure if I'm doing something wrong or if this is a bug somehow for mobile. The modal is initially hidden, so that might throw some of the initial configuration off when instantiated. However, doesn't seem to be a problem on these same browsers for desktop.

[jackocnr]

Looks like a z-index issue to me. You have an extremely high z-index on your .pc_bg_overlay_whole element, and so you will need to increase the z-index on .iti--container to be higher than this for it to appear above it.

[ryanatearth]

Thanks for getting back to me. So yes, I tried putting the z-index high on the iti--container class. And the dropdown does show (see attached screenshot). However a few things:

1. Why do I have to manually put the z-index in my css to get it to work on mobile devices? This works on desktop just fine. What is different in the underlying code that changes css/markup/dom for mobile vs desktop?

2. Even though it is showing now, it is not aligned correctly within the container. However, this works perfectly fine on desktop across different browsers. So seems something might be different in how this is done via desktop/mobile.

3. I tried using the init option 'dropdownContainer: document.getElementById('phone')', and after this then the dropdown won't even be shown when hitting the flag button.

Is there something that could be different in how mobile/desktop layout/elements/dom are created upon initialization? Seems weird that this would work on one and not the other. Unless I'm doing something wrong, but I'm really just doing the most basic use case it seems like.

Thanks for your help and looking into it.

[jackocnr]

Yeah on desktop we show a dropdown by the input, and on mobile we show a full screen popup, to make better use of the limited space. If you want to change this, see useFullscreenPopup option.

[ryanatearth]

OK. Great. I do like this better on mobile. Just didn't know this was on purpose or not. Sounds good. Thanks for the help!