具有国家/地区代码下拉列表的移动设备上的CSS问题（国际电话输入）

时间：2019-08-06 22:40:07

标签： android html css resize intl-tel-input

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

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

问题出在这里

enter image description here

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

我尝试使用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;
 }

我不确定为什么这似乎无法在移动设备上运行。

2 个答案:

答案 0 :(得分：0)

当输入是模态/对话框时，我遇到了同样的问题。
在移动设备上，下拉列表将位于其末尾的<body>中，因为：
https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117

有一个设置容器元素的选项，尝试更改dropdownContainer选项。

答案 1 :(得分：0)

那是我在库中也发现的错误。当我检查时，可以看到下拉菜单的最大高度已更改。您可以通过添加此最高高度来覆盖该最大高度

.iti-mobile .intl-tel-input .country-list {
    max-height: 200px !important; 
}
相关问题
最新问题