Блог

Я пытаюсь создать компонент автозаполнения с использованием базовых компонентов Ionic. Я достиг желаемого результата, однако мне трудно разместить свой список с предложениями выше всего остального на экране. Эта ошибка возникает:

Я не знаю, как это решить. Пожалуйста, помогите! Вот мой HTML и CSS:

 <div #div>
  <ion-input
      #inputElem
      (ionInput)="handleInput($event)"
      (ionFocus)="handleFocus($event)"
      type="search">
  </ion-input>
  <ion-button (click)="showModalList()">
    <ion-icon name="list-outline"></ion-icon>
  </ion-button>
    <ion-list *ngIf="showList amp;amp; suggestion$ | async as suggestions"
              [style.top.px]="div.getBoundingClientRect().y   div.getBoundingClientRect().height"
              [style.width.px]="div.offsetWidth" [style.maxHeight.px]="getMaxHeight(div)">
      <ion-item class="ion-text-wrap ion-padding-start ion-padding-end" button (click)="handleItemClick($event)"
                *ngFor="let suggestion of suggestions | autoCompleteFilter : currentValue">{{ suggestion.text }}</ion-item>
      <p class="ion-text-wrap ion-padding-start"
         *ngIf="(suggestions | autoCompleteFilter : currentValue).length == 0 amp;amp; showList">Nenhuma sugestão
        encontrada</p>
    </ion-list>
</div>
 

CSS:

 :host {
  position: relative;
  z-index: 1000;
  width: 100%;

  > div {
    width: 100%;
    ion-input {
      width: 100%;
      padding-right: 50px !important;
    }

    ion-button {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
    }

    ion-list {

      position: fixed;
      box-shadow: var(--box-shadow);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      overflow: auto !important;
      ion-item {
        z-index: 100;
        --full-highlight-height: 0;
      }

    }
  }
}
 

Я использую компонент внутри ion-элемента в html главной страницы.

Пожалуйста, помогите!