gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:33:05 26 4
gpt4 key购买 nike

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

我不确定为什么这在移动设备上似乎不起作用。

最佳答案

当输入处于模式/对话框中时,我遇到了同样的问题。
在移动设备上,下拉列表将位于 <body> 中。在它的最后,因为这个:
https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117

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

关于android - 具有国家代码下拉列表(国际电话输入)的移动设备上的 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57384863/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com