Angular中ngx-intl-tel-input搜索时下拉框上移问题修复求助

云原生阿岚

2026-5-9

我之前碰到过这个一模一样的问题，罪魁祸首是ngx-intl-tel-input内置的下拉框定位逻辑——当搜索过滤导致国家列表高度变化时，组件会自动调整下拉框位置来避免页面溢出，但这往往会出现不必要的上移。下面是我实测有效的解决方案：

核心思路：用自定义CSS强制固定下拉框位置

首先通过浏览器开发者工具确认组件下拉框的类名（不同版本类名略有差异：旧版本多为intl-tel-input .country-list，新版本则是iti__dropdown），然后添加以下样式来覆盖组件的默认定位逻辑：

针对新版本组件（类名以`iti__`开头）

/* 强制下拉框相对于输入框下方固定定位 */
::ng-deep .iti__dropdown {
  position: absolute !important;
  top: calc(100% + 2px) !important; /* 与输入框保持小间距，避免覆盖 */
  left: 0 !important;
  transform: none !important; /* 取消组件动态添加的位移变换，这是上移的关键原因 */
  max-height: 300px; /* 自定义列表最大高度，超出时滚动 */
  overflow-y: auto;
}

/* 确保输入框父容器为相对定位，让下拉框有正确的定位参考 */
::ng-deep .custom { /* 对应你设置的[cssClass]="'custom'" */
  position: relative;
}

针对旧版本组件（类名含`intl-tel-input`）

::ng-deep .intl-tel-input .country-list {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  transform: none !important;
  max-height: 300px;
  overflow-y: auto;
}

::ng-deep .custom {
  position: relative;
}