javascript - Ionic2 Scroll in Expandable Header -

i using ionic 2, , have implemented expandable header based on this tutorial.

it works perfectly, except have 2 issues:

1. as can see, search items 0.7 opaque. correct, background of items should have 1.0 opacity.

2. when there no results (i.e. no items in scroll list). expandable header won't collapse. there not items scroll on, won't resize header.

3. after apply filter (and clear again), infinite scroll (ioninfinite)="doinfinite($event)" event not fire when scroll bottom of page.

here code. apologies it's much, don't want leave out relevant.

any advise appreciated.

html

<ion-header>   <expandable-header [scrollarea]="mycontent" headerheight="{{isios ? 270 : 247}}">      <ion-item class="search-item searchtext">       <ion-row>         <ion-col class="col-search">           <ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngmodel)]="searchquerytext" (change)="onchangetext($event)" (ionclear)="oncanceltext($event)"             (ioninput)="oninputtext($event)" placeholder="keyword search" debounce="1" [showcancelbutton]="isios"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchquerytext" (click)="oncanceltext($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>      <ion-item class="search-item">       <ion-row>         <ion-col class="col-search">           <ion-searchbar id="ion-locationbar" [(ngmodel)]="searchquerylocation" (ionclear)="oncancellocation($event)" (ioninput)="oninputlocation($event)"             (click)="presentfiltermap()" placeholder="location" debounce="1" [showcancelbutton]="true"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchquerylocation" (click)="oncancellocation($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>      <ion-item class="search-item">       <ion-row>         <ion-col class="col-search">           <ion-searchbar id="ion-locationbar" [(ngmodel)]="searchquerysectors" (ionclear)="oncancelsectors($event)" (ioninput)="oninputsectors($event)"             (click)="presentfiltercategories()" placeholder="sectors" debounce="1" [showcancelbutton]="true"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchquerysectors" (click)="oncancelsectors($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>      <ion-item class="search-item">       <ion-row>         <ion-col class="col-search">           <ion-searchbar id="ion-locationbar" [(ngmodel)]="searchqueryrating" (ionclear)="oncancelrating($event)" (ioninput)="oninputrating($event)"             (click)="presentfilterrating()" placeholder="star rating" debounce="1" [showcancelbutton]="true"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchqueryrating" (click)="oncancelrating($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>      <ion-item class="search-item">       <ion-row>         <ion-col class="col-search">           <ion-searchbar id="ion-locationbar" [(ngmodel)]="searchquerytime" (ionclear)="oncanceltime($event)" (ioninput)="oninputtime($event)"             (click)="presentfiltertime()" placeholder="last online" debounce="1" [showcancelbutton]="true"></ion-searchbar>         </ion-col>         <ion-col class="col-cancel" *ngif="!isios">           <button ion-button *ngif="!isios && searchquerytime" (click)="oncanceltime($event)" color="primary" clear small>         <p class="small-text-search search-cancel">cancel</p>       </button>         </ion-col>       </ion-row>     </ion-item>    </expandable-header>    <ion-navbar color="primary">      <button ion-button menutoggle>       <ion-icon name="menu"></ion-icon>     </button>      <ion-title class="search-title-text">       market     </ion-title>      <div class="clear-all" *ngif="searchquerytext || searchquerylocation || searchquerysectors || searchqueryrating || searchquerytime"       (click)="clearfilters($event)">       <p class="clear-all-text {{isios ? 'clear-all-text-ios' : ''}}">clear all</p>       </div>    </ion-navbar> </ion-header>  <ion-content padding class="content-wanted" id="search-content" fullscreen #mycontent>   <ion-list>     <ion-item-sliding #slidingitem *ngfor="let item of mymodels">       <ion-item class="item-search-wanted" (click)="itemtapped($event, item, true)" (press)="openslide(slidingitem, item, $event)"> 

css

.ios, .md {     page-home {         ion-item {             width: 92%;             margin: 4%;             padding-left: 10px !important;             margin-bottom: 10px;             background-color: #fff;             opacity: 0.7;             font-size: 0.9em;             transition: 0.2s linear;         }      }  }  expandable-header .element.style {     min-height: 6px; }  expandable-header .label-md {     margin: -16px 2px -4px -18px; }  expandable-header .searchtext .label-md {     margin: -10px 2px -4px -18px; }  expandable-header .searchtext .label-ios {     margin: 25px 2px -4px -4px; }  expandable-header .label-ios {     margin: -4px 2px -4px -4px; }  .toolbar-ios ion-title {     padding: 13px 90px 3px !important; }  .toolbar-ios {     padding-top: 15px; }  expandable-header .search-item {     opacity: 0.7 !important; }  expandable-header .item-md.item-block .item-inner {     padding-right: 8px;     border-bottom: 0px solid #dedede; }  expandable-header .searchbar-md {     width: 213%; }  expandable-header .button-clear-md {     float: right;     padding-top: 18px; }  expandable-header .searchbar-clear-icon {      display: none !important;  }  .clear-all-text {     color: #fff;     font-size: 85%;     padding-right: 20px;     white-space: nowrap; }  .clear-all-text-ios {     padding-left: 250px; } 

expandable-header.ts

import { component, input, elementref, renderer } '@angular/core';  @component({     selector: 'expandable-header',     templateurl: 'expandable-header.html' }) export class expandableheader {     @input('scrollarea') scrollarea: any;     @input('headerheight') headerheight: number;     newheaderheight: any;     constructor(public element: elementref, public renderer: renderer) {     }      ngoninit() {         if (!this.scrollarea._scroll.enabled) {             this.scrollarea.enablescrolllistener();         }         this.renderer.setelementstyle(this.element.nativeelement, 'height', this.headerheight + 'px');         this.scrollarea.ionscroll.subscribe((ev) => {             this.resizeheader(ev);         });     }      resizeheader(ev) {         ev.domwrite(() => {             this.newheaderheight = this.headerheight - ev.scrolltop;             if (this.newheaderheight < 0) {                 this.newheaderheight = 0;             }             this.renderer.setelementstyle(this.element.nativeelement, 'height', this.newheaderheight + 'px');             (let headerelement of this.element.nativeelement.children) {                 let totalheight = headerelement.offsettop + headerelement.clientheight;                 if (totalheight > this.newheaderheight && !headerelement.ishidden) {                     headerelement.ishidden = true;                     this.renderer.setelementstyle(headerelement, 'opacity', '0');                 } else if (totalheight <= this.newheaderheight && headerelement.ishidden) {                     headerelement.ishidden = false;                     this.renderer.setelementstyle(headerelement, 'opacity', '0.7');                 }             }         });     } }