带有国家/地区代码下拉列表的移动设备上的CSS问题(intl-tel-input)
我正在使用这个库向用户显示国家代码和标志：https://github.com/jackocnr/intl-tel-input
在台式机上，一切都按预期运行。即使在屏幕上调整大小，响应也是如预期的。当我使用Android Chrome在移动设备上测试页面时，出现了这个问题。
以下是问题所在：
该应用程序不允许用户选择其他国家(滚动空间被隐藏-用户只能看到默认选择的国家)。
我试过使用z-index:9999，但它不起作用。
下面是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;
}我不确定为什么这在移动设备上不起作用。
回答 3
Stack Overflow用户
发布于 2019-12-13 05:36:08
当输入在模式/对话框中时，我也遇到了同样的问题。
在移动设备上，下拉列表将在其末尾的<body>中，因为：
https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117
有一个设置容器元素的选项，尝试更改dropdownContainer选项。
Stack Overflow用户
发布于 2020-10-10 23:04:22
这也是我在库中发现的一个bug。当我检查时，我可以看到dropdown的最大高度发生了变化。您可以通过添加以下内容来覆盖该max-height
.iti-mobile .intl-tel-input .country-list {
max-height: 200px !important;
}Stack Overflow用户
发布于 2021-08-15 19:34:16
你可以试一试
iti__country-list{white-space:nowrap}https://stackoverflow.com/questions/57384863
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号