Выпадающий список перемещается вверх при поиске

#javascript #html #css #angular

#javascript #HTML #css #угловой

Вопрос:

Мое угловое приложение, использующее библиотеку ngx-intl-tel-input, когда я ищу страну в раскрывающемся списке стран, перемещаясь наверх.Я хочу исправить положение выпадающего меню при поиске по этому.

Демонстрация:https://stackblitz.com/edit/ngx-intl-tel-input-demo-5u5c1p?file=src/app/app.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

1. пожалуйста, добавьте часть вашего соответствующего кода 🙂 (на моем компьютере позиция демо находится внизу)

2. Привет, staclblitz- link stackblitz.com/edit /…

3. снимок экрана проблемы ibb.co/sgqxGTX

4. stackblitz.com/edit/ngx-intl-tel-input-demo-ng-8 проверьте это

Ответ №1:

Обновить ngx-intl-tel-input пакет до версии 2.5.0

Ответ №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;
}

СМОТРИТЕ ПРИМЕР

1. скажите мне для получения дополнительной помощи

2. Привет, спасибо за быстрый ответ, но проблема не решена. Проблема с прокруткой GIF imgur.com/SgsxBpo

3. Можете ли вы прикрепить изображение / GIF к вашему вопросу (я не могу открыть его из-за безопасности на моем компьютере)

Ответ №3:

Ваша HTML-страница содержит стиль переполнения, поэтому она прокручивается вверх при вводе определенной страны, поэтому вам просто нужно отменить его настройку.