Drop down List is moving Up when searching

Question

My Angular application using ngx-intl-tel-input library when i search country on country list dropdown moving to top .I want to fix postion of dropdown menu when searching on that.

Demo: 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

Add to your css code as below to give the box a fixed position(use !important to prevent override)

: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

Answer 2

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

Answer 3

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