带有国家代码下拉列表的移动设备上的 CSS 问题 (intl-tel-input)
Posted
技术标签:
【中文标题】带有国家代码下拉列表的移动设备上的 CSS 问题 (intl-tel-input)【英文标题】：CSS issue on mobile devices with country code dropdown (intl-tel-input) 【发布时间】：2019-12-14 12:40:09 【问题描述】：我正在使用这个库向用户显示国家代码和标志：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;
我不确定为什么这似乎不适用于移动设备。
【问题讨论】：
您是否尝试使用其他浏览器？您可以专门为 select 所在的部分包含您的 html 吗？您的样式告诉我们 .country-list 存在于 .intl-tel-input 中，这不太有意义，因此查看 html 将有助于了解您如何命名 html 元素。 【参考方案1】：当输入在模式/对话框中时，我遇到了同样的问题。
在移动设备上，下拉菜单将在其末尾的 <body> 中，因为：https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117
有一个设置容器元素的选项，尝试更改dropdownContainer选项。
【讨论】：
【参考方案2】：这是我在库中也发现的一个错误。当我检查时，我可以看到下拉列表的最大高度已经改变。你可以通过添加这个来覆盖最大高度
.iti-mobile .intl-tel-input .country-list
max-height: 200px !important;
【讨论】：
【参考方案3】：你可以试试
iti__country-listwhite-space:nowrap
【讨论】：
以上是关于带有国家代码下拉列表的移动设备上的 CSS 问题 (intl-tel-input)的主要内容，如果未能解决你的问题，请参考以下文章