3

I'm using this library to show country code and flag to users: https://github.com/jackocnr/intl-tel-input

On desktop everything works as expected. Even on screen resize the response is as expected. The problem appears when I test the page on a mobile device, using Android Chrome.

Here is the problem:

enter image description here

The app doesn't allow users to choose other countries (A space for scrolling is hidden - the user only see default selected country).

I tried using z-index:9999 but it didn't work.

Here is the CSS implementation:

.intl-tel-input .country-list {
    position: absolute;
    z-index: 9999;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 0 -1px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    background-color: white;
    border: 1px solid #CCC;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: scroll;
 }

I am not sure why this doesn't seem to work on mobile devices.

halfer
  • 19,824
  • 17
  • 99
  • 186
Aleks Per
  • 1,549
  • 7
  • 33
  • 68
  • Did you try using a different browser? Can you include your html specifically for that section where the select is? Your styles tells us that .country-list exists within .intl-tel-input which doesn't quite make sense so seeing the html would help see how you named your html elements. – Mosia Thabo Aug 06 '19 at 22:57

4 Answers4

2

I had the same problem, when input was in a modal/dialog.
On mobile, the dropdown will be in the <body> at the end of it, because this:
https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117

There is an option to set the container element, try to change the dropdownContainer option.

smith8888
  • 21
  • 2
0

That is a bug I also found in the library. When I inspect I can see that the max-height of the dropdown has changed. You can overwrite that max-height by adding this

.iti-mobile .intl-tel-input .country-list {
    max-height: 200px !important; 
}
Hervera
  • 584
  • 9
  • 17
0

You could try

iti__country-list{white-space:nowrap}
Marcel Hofgesang
  • 951
  • 1
  • 15
  • 36
MRA
  • 1
0

Image show error

I had the same mobile problem and dealt with js that might help someone. Everyone can refer.

I have handled the check that handles the click on the flag that repositions the position of the displayed list country. The code that I see is working.

 iti = window.intlTelInput(inputPhoneNumber, intlTelInputOptions)
 iti.isMobile= false;
 $('.iti__selected-flag').click(function () {
   if ($('body.iti-mobile').length) {
       $('.iti--container').css('top', $(this)[0].getBoundingClientRect().top + 35 + 'px');
       $('.iti--container').css('left', $(this)[0].getBoundingClientRect().left + 'px');
   }
})
Minji Mario
  • 1
  • 1