Country Dropdown Hidden Mobile about intl-tel-input HOT 4 CLOSED

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!

from intl-tel-input.

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.

from intl-tel-input.

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.

from intl-tel-input.

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.

from intl-tel-input.