android 国家代码为CN(intl-tel-input)的移动的设备上的CSS问题

3df52oht 于 2024-01-04 发布在 Android

关注(0)|答案(5)|浏览(202)

我使用这个库向用户显示国家代码和国旗：https://github.com/jackocnr/intl-tel-input
在桌面上，一切都按预期工作。即使在屏幕调整大小的响应也是预期的。当我使用Android Chrome在移动终端上测试页面时，问题出现了。
问题是：
x1c 0d1x的数据
该应用程序不允许用户选择其他国家（滚动空间是隐藏的-用户只能看到默认选择的国家）。
我试过使用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;
 }

字符串
我不知道为什么这似乎不工作的移动的设备。

android

来源：https://stackoverflow.com/questions/57384863/css-issue-on-mobile-devices-with-country-code-dropdown-intl-tel-input

5条答案

按热度按时间

qyzbxkaa1#

我遇到了同样的问题，当输入是在一个模态/对话框。
在移动的上，<body>将位于它的末尾，因为：
https://github.com/jackocnr/intl-tel-input/blob/v16.0.8/src/js/intlTelInput.js#L117
有一个设置容器元素的选项，尝试更改dropdownContainer选项。

赞(0）回复(0）举报 2024-01-04

yquaqz182#

Image show error
我也有同样的移动的问题，处理了可能对某人有帮助的JS，大家可以参考。
我已经处理了检查，它处理了重新定位所显示的列表国家的位置的标志上的点击。我看到的代码正在工作。

iti = window.intlTelInput(inputPhoneNumber, intlTelInputOptions)
 iti.isMobile= false;
 $('.iti__selected-flag').click(function () {
   if ($('body.iti-mobile').length) {
       $('.iti--container').css('top', $(this)[0].getBoundingClientRect().top + 35 + 'px');
       $('.iti--container').css('left', $(this)[0].getBoundingClientRect().left + 'px');
   }
})

字符串

赞(0）回复(0）举报 2024-01-04

7ivaypg93#

return false;

$(window).on('scroll', function() {
            positionItiContainer();
        });
        $('.iti__selected-flag').click(function () {
            positionItiContainer();
        });
        var positionItiContainer = function() {
            if ($('body.iti-mobile').length) {
                var phoneElement = document.getElementById('phone');
                var selectedFlag = document.querySelector('.iti__selected-flag');
                var phoneRect = phoneElement.getBoundingClientRect();
                var selectedFlagRect = selectedFlag.getBoundingClientRect();
                $('.iti--container').css('top', selectedFlagRect.bottom + 'px');
                $('.iti--container').css('left', selectedFlagRect.left + 'px');
            }
        };

字符串

展开查看全部

赞(0）回复(0）举报 2024-01-04

y3bcpkx14#

这是我在库中也发现的一个错误。当我检查时，我可以看到文件的最大高度已经改变。您可以通过添加以下内容覆盖该最大高度

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

字符串

赞(0）回复(0）举报 2024-01-04

6tr1vspr5#

你可以试试

iti__country-list{white-space:nowrap}

字符串

赞(0）回复(0）举报 2024-01-04

我来回答

android 国家代码为CN(intl-tel-input)的移动的设备上的CSS问题

5条答案

相关问题

热门标签

最新问答