带有国家/地区代码下拉列表的移动设备上的 CSS 问题 (intl-tel-input)

Question

我正在使用这个库向用户显示国家代码和标志： 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;
 }

我不确定为什么这似乎不适用于移动设备。

Answer 1

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

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

Answer 2

这也是我在库中发现的一个错误。 当我检查时，我可以看到下拉菜单的最大高度已经改变。 你可以通过添加这个来覆盖最大高度

.iti-mobile .intl-tel-input .country-list {
    max-height: 200px !important; 
}

Answer 3

你可以试试

iti__country-list{white-space:nowrap}

带有国家/地区代码下拉列表的移动设备上的 CSS 问题 (intl-tel-input)

问题描述

3 个解决方案

解决方案1
0 2019-12-12 21:36:07

解决方案2
0 2020-10-10 15:04:21

解决方案3
0 2021-08-15 19:34:16

带有国家/地区代码下拉列表的移动设备上的 CSS 问题 (intl-tel-input)

问题描述

3 个解决方案

解决方案1 0 2019-12-12 21:36:07

解决方案2 0 2020-10-10 15:04:21

解决方案3 0 2021-08-15 19:34:16

解决方案1
0 2019-12-12 21:36:07

解决方案2
0 2020-10-10 15:04:21

解决方案3
0 2021-08-15 19:34:16