带有国家/地区代码下拉列表的移动设备上的 CSS 问题 (intl-tel-input)
[英]CSS issue on mobile devices with country code dropdown (intl-tel-input)
问题描述
I'm using this library to show country code and flag to users: https://github.com/jackocnr/intl-tel-input
我正在使用这个库向用户显示国家代码和标志： 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.当我使用 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.我尝试使用z-index:9999但它没有用。
Here is the CSS implementation:这是CSS实现：
.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 个解决方案
解决方案1
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:在移动设备上，下拉列表将在其末尾的<body>中，因为：
https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117 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.有一个选项可以设置容器元素，尝试更改dropdownContainer选项。
解决方案2
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;
}
解决方案3
0 2021-08-15 19:34:16
你可以试试
iti__country-list{white-space:nowrap}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.