Ion-content overlaps in ion-header

Ionic Framework ionic-v3
1

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.NAME)>
      {{title.VNAME}}
    </ion-item>
  </ion-list>

listing
listing.JPG358Ă—648 10.8 KB
filter
filter.JPG354Ă—655 20.4 KB

This is happening only with the latest version of 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

But with below old version it is working fine.

Ionic info :

@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?

2 
<ion-header>

  <ion-navbar>
    <ion-title>Lorem Ipsum</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
<ion-label floating>Demo</ion-label>
<ion-input  type="text"></ion-input>
</ion-content>

try this one

3

@cooldp007
Thanks for the reply.
Tried with your suggestion but getting same result and we already have ion-content padding in code.

4

Please put your code here

5

filter.html

<ion-header>
  <ion-navbar>
    <ion-title>Filter</ion-title>
  </ion-navbar>
</ion-header>

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

    <ion-label>year:</ion-label>
    <ion-select interface="popover" [(ngModel)]="SelectedYear">
      <ion-option *ngFor="let year of years" [value]="year.YEAR">{{year.VYEAR}}</ion-option>
    </ion-select>
  </ion-item>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <button ion-button (click)="applyFilter()" icon-start>Apply Filter</button>
    <button ion-button (click)="clearFilters()" icon-end>Clear</button>
  </ion-toolbar>
</ion-footer>

testPage.html (listing page):

<ion-header>
  <ion-navbar>
    <ion-title>Test Page</ion-title>
    <button ion-button (click)="filter()" color="light">
      <ion-icon name="funnel"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <ion-card *ngFor="let video of DisplayVideos">
    <ion-card-content>
      <ion-row>
        <ion-col>
          <p> {{video.VNAME}} </p>
        </ion-col>
        <ion-col>
          <ion-buttons end>
            <button ion-button icon-only (click)="getDetails(video.VID)">
              <ion-icon name="ios-add-circle-outline"></ion-icon>
            </button>
          </ion-buttons>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <p>{{video.VYEAR}}</p>
        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>
</ion-content>
6

give padding

ion-app.md [padding], ion-app.md [padding] .scroll-content
{
    padding-top:30px;
}
7

Now with the padding-top:30px; overlapped part is less but the issue is still there.
This issue is coming when we filter the data using textbox-autocomplete otherwise it is working fine.

Is that possible because of “ionic-plugin-keyboard”: “^2.2.1” ?

8

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();
    }
1 Like