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

3df52oht  于 12个月前  发布在  Android
关注(0)|答案(5)|浏览(142)

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

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

qyzbxkaa

qyzbxkaa1#

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

yquaqz18

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');
   }
})

字符串

7ivaypg9

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');
            }
        };

字符串

y3bcpkx1

y3bcpkx14#

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

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

字符串

6tr1vspr

6tr1vspr5#

你可以试试

iti__country-list{white-space:nowrap}

字符串

相关问题