搜索时下拉列表向上移动

Question

当我在国家列表下拉列表中搜索国家时，我的 Angular 应用程序使用 ngx-intl-tel-input 库移动到顶部。我想在搜索时修复下拉菜单的位置。

演示：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:Issue gif

Answer 1

您的 html 页面包含溢出样式，因此在键入特定国家/地区时会向上滚动，因此您只需取消设置即可。

Answer 2

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

Answer 3

如下添加到您的 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;
}

SEE EXAMPLE