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

Question

谁能帮助我如何使国家/地区列表下拉列表始终与输入字段宽度匹配？

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

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

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

HTML：

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

jQuery：

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

谢谢，

Answer 1

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

然后使用一些 CSS 来相应地定位下拉列表和标志。

也许还有其他解决方案，例如更改文档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">