帶有國家/地區代碼下拉列表的移動設備上的 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