时间戳

首页 > 解决方案 > 搜索时下拉列表向上移动

javascript - 搜索时下拉列表向上移动

问题描述

当我在国家列表下拉列表中搜索国家时，我的 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：发行 gif

标签： javascripthtmlcssangular

解决方案

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

查看示例

推荐阅读