Ion-content overlaps ion-header when using textbox-autocomplete with ionic3

Question

We have a listing page and filter page in ionic app. Filter page is having a textbox-autocomplete and dropdown. When trying to filter with textbox-autocomplete ion-content goes inside ion-header as shown in below snapshots.

Textbox-Autocomplete html:

<input type="text" [(ngModel)]="selectedTitle" (input)="getTitles($event)" placeholder="search titles" />
  <ion-list *ngFor="let title of titles">
    <ion-item tappable (click)=selectTitle(title.VNAME)>
      {{title.VNAME}}
    </ion-item>
</ion-list>

I have put filter.html and testPage.html in this plunker https://plnkr.co/edit/FASHAxUAJwcz9XYeKDqj?p=catalogue

Ionic info:

    @ionic/cli-utils  : 1.14.0
    ionic (Ionic CLI) : 3.14.0
global packages:
   cordova (Cordova CLI) : 7.0.1
local packages:
    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1
System:
    Node : v6.9.5
    npm  : 3.10.10
    OS   : Windows 10
Misc:
    backend : legacy

This issue is happening when using latest version of Ionic info, with the below old version its working fine.

@ionic/cli-utils  : 1.9.1
    ionic (Ionic CLI) : 3.9.1
global packages:
    Cordova CLI : 7.0.1
local packages:
    @ionic/app-scripts : 1.3.3
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.5.3
System:
    Node : v6.9.5
    npm  : 3.10.10
    OS   : Windows 10

Can anyone please guide us to solve this issue?

Yes, It will not work on plunker. I have added html pages on plunker to shorten the length of question here as I need to mention many things while asking. That is why I have added a snapshot of the issue. — Darshana

Darshana Darshana · Accepted Answer · 2017-10-30T09:49:09

I got the solution by resizing ion-content using below code:

   import { Component,ViewChild } from '@angular/core';
   import { Content } from 'ionic-angular';

    export class TestPage {

    @ViewChild(Content) content: Content;

    ......
    Events.subscribe('applyFilter', (data) => {
    this.content.resize();
    }

Ion-content overlaps ion-header when using textbox-autocomplete with ionic3

1 Answers