Intl-tel-input: 使国家/地区列表下拉宽度与输入字段宽度匹配

Question

任何人都可以帮助我如何使国家/地区列表下拉列表始终与输入字段宽度相匹配？

将国家/地区列表下拉列表设置为 100% 不起作用。它应该有其祖父母的 100% 宽度。但是，不确定如何实现。

可以通过javascScript实现，但我只需要使用CSS即可。当输入字段宽度改变时，下拉菜单和输入字段的宽度应该相同。

这是在线 jsfiddle 演示 url： http://jsfiddle.net/5num12gh/

HTML:

<input type="tel" id="phone">

jQuery:

$("#phone").intlTelInput();

谢谢，

Answer 1

先把iti__flag-container的顺序改成：

将top: 17pxcss属性添加到iti__selected-flagclass
从 iti__country-list
中删除 white-space css 属性

请注意，您的下拉菜单宽度将与父级宽度相同

Answer 2

您可以将 flagContainer 的位置更改为 absolute/relative 以外的其他位置，这样下拉菜单不会相对于它定位，而是相对于 div 和 class .intl-tel-input 具有输入的宽度（其中唯一的非绝对元素）

然后 CSS 相应地放置下拉菜单和标志。

也许还有其他解决方案，如 DOCs 中所述更改 dropdownContainer 元素，但不确定。

检查下面的代码片段或jsfiddle

$("#phone").intlTelInput();

.iti-flag {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/img/flags.png");
}

body .intl-tel-input .flag-container {
  position: static;

}

body .intl-tel-input .selected-flag {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
}

body .intl-tel-input .country-list {
  width: 100%;
  top: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/js/utils.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/css/intlTelInput.css" rel="stylesheet"/>

<input type="tel" id="phone">

Intl-tel-input: 使国家/地区列表下拉宽度与输入字段宽度匹配

Intl-tel-input: Make Country list dropdown width match the input field width

css

intl-tel-input