How to code an autocomplete searchbar for Youtube suggestions

[odorakel]

Hey folks,

…well I was a bit creative using a popover with a searchbar and a content area, that is filled with the search results, but wihtin my popup the containing the should always stay on top, but it’s been scrolling with the .

How can I fix this CSS issues?

Here’s the source of my popover template:

 <ion-header>
  <ion-searchbar
    [(ngModel)]="searchInput"
    [showCancelButton]=true
    [cancelButtonText]="Back"
    [debounce]=500
    (ionInput)="onSearchInput($event)"
    (ionCancel)="onSearchCancel($event)"
    (ionClear)="onSearchClear($event)">
  </ion-searchbar>
</ion-header>
<ion-content *ngIf="matches" fullscreen="true">
  <ion-list *ngFor="let item of matches">
    <ion-item>
      {{item.name}}, {{item.position}}
    </ion-item>
  </ion-list>
</ion-content>

And here’s my custom CSS for this template - not nice, but working fine so far.

.search-popover {
  position:relative !important;
}

.searchPopover .popover-content {
  top: 0px !important;
  left: 0px !important;
  transform-origin: right top 0px;
  transform: scale(1);
  right: 0px !important;
  width: 100% !important;
  max-height: 55% !important;
  min-height: 55px !important;
  border-radius:0px;
}
.searchPopover ion-searchbar .searchbar-search-icon {
  top:15px;
}
.searchPopover ion-searchbar .searchbar-input {
  padding: 12px 55px;
}
.searchPopover ion-searchbar {
  padding:0px;
  top:0 !important;
  z-index:999 !important;
}
.searchPopover ion-searchbar  * {
  border:0px !important;
  border-radius:0px !important;
  border-shadow:0px !important;
}
.searchPopover ion-backdrop {
  opacity:0.6 !important;
}

.searchPopover ion-content {
  /* margin-top:55px !important; */
}

.searchPopover ion-list .item-inner {
  margin-left:38px;
}

.searchPopover ion-list { margin:0px; }
.searchPopover [padding] { padding: 0px; }

.searchPopover ion-popover-inner {
}

…and here’s the result:

Before scrolling:

---

After scrolling

Thanks,
Oliver