I'm currently working on an IONIC 3 app and facing a challenge. When I tap on the ion search and the Keyboard pops up in ANDROID, it disrupts the layout by pushing all the content around.
Original screen:
Keyboard mode active:
Things I've tried so far:
In app.module.ts: scrollAssist: false,
autoFocusAssist: false,
and also: this.keyboard.disableScroll(true);
as well as: this.keyboard.disableScroll(false);
The behavior is normal on IOS devices
This issue occurs only on screens with TABS. On other screens, the keyboard works fine without pushing any content.
IONIC INFO:
cli packages:
@ionic/cli-utils : 1.10.1
ionic (Ionic CLI) : 3.10.1
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 1.3.7
Cordova Platforms : android 6.2.1 browser 4.1.0 ios 4.3.1
Ionic Framework : ionic-angular 3.5.3
System:
ios-sim : 5.1.0
Node : v6.11.0
npm : 3.10.10
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
My HTML:
<ion-header>
<ion-navbar color = "festow-primary">
<button ion-button menuToggle>
<icon-icon name = "menu"></ion-icon>
</button>
<ion-title> Festas em {{cidadeCodigo}} </ion-title>
<ion-buttons end>
<button (click) = "modalPesquisa()" ion-button icon-only>
<icon-icon name = "ios-funnel"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class = "teste">
<ion-refresher (ionRefresh) = "doRefresh($event)">
<ion-refresher-content
pullingIcon = "arrow-dropdown"
pullingText = "Pull to refresh"
refreshingSpinner = "circles"
refreshingText = "Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-searchbar *ngIf = "festa"
placeholder = "Search..."
[(ngModel)] = "myInput"
(ionInput) = "onInput($event)">
</ion-searchbar>
<ion-card *ngFor = "let festa of festas" class = "cards card-full" style = "border-color: #ffffff!important;">
<img class = "card-image" src = "http://festow.com/images/{{festa.thumb}}" height = "42%" style = "border-color: #ffffff!important;">
<ion-fab center edge class = "fab-cards">
<button ion-fab mini class = "fab-button" (click) = "itemTapped($event, festa)"><icon-icon name = "add"></ion-icon></button>
</ion-fab>
<ion-card-content class = "card-content-grid-padding">
<ion-grid class = "grid-padding">
<ion-row>
<ion-col col-6 col-sm>
<p class = "p-cards fonte">{{festa.nome}}</p>
<p class = "p-cards fonte">{{festa.horario}} - {{festa.hora_fim}}</p>
</ion-col>
<ion-col col-4 col-sm offset-2>
<p class = "p-cards fonte">{{festa.nome_casa}}</p>
<p class = "p-cards"><rating [score] = "festa.estrelas" max = "5"></rating></p>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-content>
My TS:
ngOnInit() {
// this.keyboard.disableScroll(true);
// this.keyboard.disableScroll(false);
this.presentLoading();
setTimeout(() => {
this.festaService.loadFestas(this.cidadeCodigo).subscribe(
data => {
this.loader.dismiss();
if (data['erro'] == false) {
this.festa = data.festa;
this.nomeFesta = data.festa.nome;
console.log(data.festa);
let alert = this.alertCtrl.create({
title: 'Success!',
subTitle: 'These are the parties happening today in' + this.cidadeCodigo + '.',
buttons: [
{
text: 'OK',
handler: data => {
}
}
]
});
alert.present();
} else {
this.naotem = '1';
let alert = this.alertCtrl.create({
title: 'Success!',
subTitle: 'No parties found today in' + this.cidadeCodigo + '.',
buttons: [
{
text: 'OK',
handler: data => {
}
}
]
});
alert.present();
}
},
err => {
console.log(err);
},
() => console.log('parties loaded')
);
}, 2000);
}