我正在使用此库显示国家代码并向用户标记: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;
}
我不确定为什么这在移动设备上似乎不起作用。
最佳答案
当输入是模态/对话框时,我遇到了同样的问题。
在移动设备上,下拉列表将在其末尾的<body>
中,因为:
https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117
有一个设置容器元素的选项,尝试更改dropdownContainer
选项。