Country code dropdown causing CSS problem on mobile devices (intl-tel-input)

Question

Country code dropdown causing CSS problem on mobile devices (intl-tel-input)

Hey there, I've been using this awesome library for displaying country codes and flags to our users. Check it out here: https://github.com/jackocnr/intl-tel-input

Everything was working perfectly on desktop, even when resizing the screen. But when I decided to test it on a mobile device with Android Chrome, that's when the issue popped up.

So here's the problem I encountered:

https://i.sstatic.net/YYZaH.png

Users are unable to select different countries because the scrolling functionality is hidden, and they can only see the default selected country.

I attempted to resolve this by using z-index:9999, but unfortunately, it didn't work.

Here's the CSS code I implemented:

.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'm puzzled as to why this issue only seems to occur on mobile devices. Any ideas on how to fix it?

android html css resize intl-tel-input

Answer 1

Answer №1

Encountering a similar issue myself, especially when the input was displayed in a modal or dialog box.
When viewing on mobile, the dropdown menu seems to be appended to the <body> element at the bottom due to this behavior:
https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117

An alternative solution is to modify the container element by adjusting the dropdownContainer option.

Answer 2

Encountering a similar issue myself, especially when the input was displayed in a modal or dialog box.
When viewing on mobile, the dropdown menu seems to be appended to the <body> element at the bottom due to this behavior:
https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117

An alternative solution is to modify the container element by adjusting the dropdownContainer option.

Answer 3

Answer №2

Image display issue

I recently encountered a similar issue on my mobile device and found a solution involving JavaScript that may be helpful to others. Feel free to reference it.

I have implemented a function to handle clicks on the flag icon, which repositions the displayed list of countries. The code appears to be functioning as intended.

 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');
   }
})

Answer 4

Image display issue

I recently encountered a similar issue on my mobile device and found a solution involving JavaScript that may be helpful to others. Feel free to reference it.

I have implemented a function to handle clicks on the flag icon, which repositions the displayed list of countries. The code appears to be functioning as intended.

 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');
   }
})

Answer 5

Answer №3

iti.isMobile = false;

        $(window).on('scroll', function() {
            positionItiContainer();
        });

        $('.iti__selected-flag').click(function () {
            positionItiContainer();
        });

        var positionItiContainer = function() {
            if ($('body.iti-mobile').length) {
                var phoneElement = document.getElementById('phone');
                var selectedFlag = document.querySelector('.iti__selected-flag');
                var phoneRect = phoneElement.getBoundingClientRect();
                var selectedFlagRect = selectedFlag.getBoundingClientRect();

                $('.iti--container').css('top', selectedFlagRect.bottom + 'px');
                $('.iti--container').css('left', selectedFlagRect.left + 'px');
            }
        };

Answer 6

iti.isMobile = false;

        $(window).on('scroll', function() {
            positionItiContainer();
        });

        $('.iti__selected-flag').click(function () {
            positionItiContainer();
        });

        var positionItiContainer = function() {
            if ($('body.iti-mobile').length) {
                var phoneElement = document.getElementById('phone');
                var selectedFlag = document.querySelector('.iti__selected-flag');
                var phoneRect = phoneElement.getBoundingClientRect();
                var selectedFlagRect = selectedFlag.getBoundingClientRect();

                $('.iti--container').css('top', selectedFlagRect.bottom + 'px');
                $('.iti--container').css('left', selectedFlagRect.left + 'px');
            }
        };

Answer 7

Answer №4

Yes, the bug is present in the library as well. By inspecting the code, I noticed that the max-height of the dropdown has been altered. To fix this issue, you can override the max-height by including the following CSS:

.iti-mobile .intl-tel-input .country-list {
    max-height: 200px !important; 
}

Answer 8

Yes, the bug is present in the library as well. By inspecting the code, I noticed that the max-height of the dropdown has been altered. To fix this issue, you can override the max-height by including the following CSS:

.iti-mobile .intl-tel-input .country-list {
    max-height: 200px !important; 
}

Answer 9

Answer №5

Why not give it a shot?

iti__country-list{white-space:nowrap}

Answer 10

Why not give it a shot?

iti__country-list{white-space:nowrap}

Answer 11

Answer №6

I found a simple solution that worked for me with just one line of code.

useFullscreenPopup: false

This snippet shows how that part of my code is implemented

var iti = window.intlTelInput(input, {
  initialCountry: "auto",
  geoIpLookup: function(callback) {
    fetch("https://ipapi.co/json")
      .then(res => res.json())
      .then(data => callback(data.country_code))
      .catch(() => callback("us"));
  },
   utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.12/js/utils.js",
   useFullscreenPopup: false 
});

For additional details, check out https://github.com/jackocnr/intl-tel-input/blob/master/README.md

Answer 12

I found a simple solution that worked for me with just one line of code.

useFullscreenPopup: false

This snippet shows how that part of my code is implemented

var iti = window.intlTelInput(input, {
  initialCountry: "auto",
  geoIpLookup: function(callback) {
    fetch("https://ipapi.co/json")
      .then(res => res.json())
      .then(data => callback(data.country_code))
      .catch(() => callback("us"));
  },
   utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.12/js/utils.js",
   useFullscreenPopup: false 
});

For additional details, check out https://github.com/jackocnr/intl-tel-input/blob/master/README.md

Country code dropdown causing CSS problem on mobile devices (intl-tel-input)

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Is the Spring MVC ModelAndView object being returned?

Ways to fetch additional Product Cards using JSON and a nextPage parameter

The most efficient method for creating a substantial amount of pre-existing HTML within the DOM using jQuery

Tips for positioning a canvas and a div element next to each other on a webpage

The Android webview fails to load the page, but the app successfully loads it when accessed through the

How do I adjust the ul size to be proportionate to the header?

The function onClick does not function properly when used with the <p> element, but it works flawlessly with the <button> element

Determine the selected option in the dropdown menu upon loading the page and when clicked

What is the most effective method for integrating Bootstrap CSS into an Angular project?

What is the best way to eliminate leading zeros in PHP when echoing SQL statements?

Does applying a style to an element that already has the same value result in a decrease in performance? Alternatively, do all browsers simply overlook it?

Viewing an image from a local file on a web browser

Unraveling the onsubmit FormObject in an HTML form within the Google Sheets Sidebar: Tips and tricks

Performing multiple actions in an Android EditText

Result android connection

Take off the wrapping from the package

Kik Card - Using Synchronous XMLHttpRequest within the Kik.js Script

Choosing a box will cause a dashed rectangle to appear when the mouse is selected

Failure in Bootstrap Typography #1 - Unable to locate proper class attribute values for uppercase and reverse transformations

Flashing Effect of Angular Ui-Bootstrap Collapse During Page Initialization