搜索时，下拉列表向上移动

Question

当我在国家/地区列表下拉列表中搜索国家/地区时，我的Angular应用程序使用ngx intl tel输入库。我想在搜索时修复下拉菜单的位置。

演示：https://stackblitz.com/edit/ngx-intl-tel-input-demo-5u5c1p?file=src%2Fapp%2Fapp.component.ts

<div style="margin: 50px">
<br>
<form #f="ngForm" [formGroup]="phoneForm">
<div class="mb-2">
<ngx-intl-tel-input 
[cssClass]="'custom'" 
[preferredCountries]="preferredCountries"
[enableAutoCountrySelect]="true" 
[enablePlaceholder]="true" 
[searchCountryFlag]="true"
[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
[selectFirstCountry]="false" 
[selectedCountryISO]="CountryISO.India"
[maxLength]="15" 
[tooltipField]="TooltipLabel.Name" 
[phoneValidation]="true" 
[separateDialCode]="separateDialCode"
name="phone" formControlName="phone">
</ngx-intl-tel-input>
</div>
<div class="mb-2">
<button (click)="f.reset()">Reset</button>
</div>
</form>
<br>
</div>

GIF：发布GIF

Answer 1

将ngx-intl-tel-input包更新为2.5.0

Answer 2

添加到您的css代码中，如下所示，为框提供固定位置(使用!important防止覆盖(

:host ngx-intl-tel-input  ::ng-deep .country-dropdown{
left: 0px!important;
right: auto!important;
top: 100%!important;
transform: translateY(0px)!important;
bottom: auto!important;
}

参见示例

Answer 3

您的html页面包含溢出样式，这就是为什么在键入特定国家/地区时会向上滚动，所以您只需要取消设置即可。