Hi all. I have some problems with Ionic 3. I have a home page, with searchbox. When I type some texts, App will navigate to Exam Schedule Page. But when I back to Home Page. Searchbox hidden. I don’t why so that. Can you help me. Thank all.
// Home Page Component
import { ExamSchedulePage } from './../exam-schedule/exam-schedule';
import { NavController} from 'ionic-angular';
import { FormBaseComponent } from './../../components/form-base/form-base';
import {
Component,
OnInit,
} from '@angular/core';
import 'rxjs';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Keyboard } from '@ionic-native/keyboard';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage extends FormBaseComponent implements OnInit {
public frm: FormGroup;
public formErrors = {
search: ''
}
public validationMessages = {
search: {
required: 'Student ID is required.',
pattern: 'Student ID is invalid.'
}
}
public controlConfig = {
search: new FormControl('', [
Validators.required,
Validators.pattern(/^\d*\.?\d+$/)
])
}
constructor(
private _navCtrl: NavController) {
super();
}
public ngOnInit() {
super.ngOnInit();
this.frm.get('search').valueChanges.subscribe((idStudent: string) => {
if(idStudent.length === 8) {
this.openNewPage(idStudent);
}
})
}
public openNewPage(value: any) {
this._navCtrl.push(ExamSchedulePage, {
idStudent: value.search
}, { duration: 250 })
}
}
Home Page Template
<ion-header>
<ion-navbar color='primary'>
<ion-title text-center>
<div class="flex flex_center">
<i class="material-icons">event_note</i> <span class="mar_left_7">UIT ES Creator</span>
</div>
</ion-title>
</ion-navbar>
</ion-header>
<ion-content scroll="true">
<form [formGroup]="frm">
<ion-searchbar type="text" formControlName="search" [showCancelButton]="shouldShowCancel">
</ion-searchbar>
<ion-badge class="block_center badge__danger" *ngIf="formErrors.search">
{{formErrors.search}}
</ion-badge>
</form>
</ion-content>
have you set root page in your app.component.ts file ?
@nguyenphithu
Just had a look at your repo…
Move the ion-searchbar into the header…
<ion-header>
<ion-navbar color='primary'>
<ion-title text-center>
<div class="flex flex_center">
<i class="material-icons">event_note</i> <span class="mar_left_7">UIT ES Creator</span>
</div>
</ion-title>
</ion-navbar>
<form [formGroup]="frm">
<ion-searchbar type="text" maxlen formControlName="search" [showCancelButton]="shouldShowCancel" (ionInput)="onInput($event.target.value)">
</ion-searchbar>
<ion-badge class="block_center badge__danger" *ngIf="formErrors.search">
{{formErrors.search}}
</ion-badge>
</form>
</ion-header>
<ion-content padding>
<ion-card class="card_home">
<ion-card-header>
Hoạt động gần đây
</ion-card-header>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14520909</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
<ion-col col-lg-3 col-md-4 col-sm-6>
<button class="block_center" ion-button>14521021</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-content>
@nguyenphithu
your problem solved or not? because it will work perfact now in my PC !!!
Run it on an Android.
The search bar is being hidden beneath the ion-header
1 Like
Okay. Thank all so much. i will try again 
No problem.
Don’t forget to like or mark as solution where appropriate
1 Like
When I back to HomePage, it looks like this
. And when I focus on search box, app will normal again. Sorry my english is bad
I’ll have another look. Did not do that on mine…
Ps your English is better than my whatever language you’re native to 
1 Like
It worked. When it set style is “position: fixed” for ion-search and form. . But I don’t want to do that 
Nor should you need to. I’ve got a sleeping baby on me atm so will come back to you.
Where do you reside in the world?
I from in Vietnam. I have just started IONIC 3 from yesterday. Okay the family is important. 
Aha. Cool. In the UK myself so 7 hour difference.
You might get my reply tomorrow at this rate.
1 Like
I was able to reproduce the problem and done a solution to it.
I think it’s a combination of things…
On Android when the keyboard displays it auto-shrinks the viewport (think making a browser smaller by dragging it in on a Windows system).
THEN… You are auto going to another page but the previous one still has the shrunken viewport in the dom.
When you go back you’re left with a screen with a small viewport and no keyboard. You can basically prove this coz when you reclick into the search box the screen sorts itself out.
The git repo I’ve put up shows your app but with a ‘go’ button to change screens instead of reacting to what is typed into the ion-searchbar and it now looks great.
Let me know how you get on with that (and as always, like or mark as ‘solution’ whatever is handy).
1 Like
Thank you so much. I saw you use button to navigate to Exam Shedule page. But I want to type text in searchbox, after that navigate Exam Shedule page. (Don’t use button). So I used CSS style to resolve. And it worked. :)
To be honest that search box is not supposed to be used in the manner you’re using it, it’s supposed to be used for ‘searching’ with some kind of dynamic list being shown. You need to sort that logic out in my opinion using probably a regular text box
Secondly you really should not use css trickery to handle this. It’ll cause problems further down the line.
Keeping what you’ve done already you’d be better off using the ionic native keyboard plugin which allows you to close the keyboard. You’d close the keyboard, then navctrl.push to the next screen thus not affecting the viewport.
I’d write it myself but then you wouldn’t learn
1 Like
