我正在使用此库显示国家代码并向用户标记:https://github.com/jackocnr/intl-tel-input

在桌面上,一切正常。即使在屏幕上调整大小,响应也是预期的。当我使用Android Chrome在移动设备上测试页面时,会出现问题。

这是问题所在:

android - 具有国家/地区代码下拉列表的移动设备上的CSS问题(国际电话输入)-LMLPHP

该应用不允许用户选择其他国家/地区(滚动空间已隐藏-用户只能看到默认的所选国家/地区)。

我尝试使用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选项。

10-07 22:32