CSS issue on mobile devices with country code dropdown (intl-tel-input)
Question
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:
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.
3 answers
solution1
0 2019-12-12 21:36:07
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.
solution2
0 2020-10-10 15:04:21
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;
}
solution3
0 2021-08-15 19:34:16
你可以试试
iti__country-list{white-space:nowrap}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.