Ionic Nav bar scrolls with ion-content

Ionic Framework ionic-v3
1

New to ionic. Downloaded latest blank project and modified to create one input box, a submit button and a navigation bar in the header IOS OS 11 and device iphone6s. On clicking in the input field and scrolling up ion-content and header moves up. Tried CSS options position: fixed, absolute, ‘ion-fixed’ but none works.

Desired action : Header with Nav bar remains in fixed position.

Here is the Ionic info.
cli packages:

@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
global packages:

cordova (Cordova CLI) : 7.0.1
local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms : ios 4.4.0
Ionic Framework : ionic-angular 3.7.1
System:

ios-deploy : 1.9.1
ios-sim : 5.0.13
Node : v6.9.4
npm : 4.2.0
OS : macOS Sierra

2

What does your template look like?

3

here is the html template and it is default. No fancy CSS.

Store ID
Please enter client identifier.
Enter Id
Save
4

I have tried position:all values, overflow-y: all values, display: block for header css and they don’t work.

<ion-header>
<ion-navbar>
<ion-title no-border>Store ID</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<div >
<ion-card>
<table >
<tr><td >Please enter client identifier.
</td></tr>
</table>
</ion-card>

<div>
<form #f=“ngForm” >
<ion-item >
<ion-label >Enter Id</ion-label>
<ion-input type=“text” name=“clientId” required [(ngModel)] = “clientId” autocapitalize=“off” autocorrect=“off”> </ion-input>
</ion-item>
<br>
<button ion-button type=“submit” full small block
[disabled]=“disableSubmit” (click)=“storeId(clientId)”> Save </button>
</form>
</div>
</div>
</ion-content>

5

I resolved the scrolling of the nav bar using following code. Any other suggestion is appreciated as it causes a different issue.

ionViewDidEnter() {
this.platform.ready().then(() => {
Keyboard.disableScroll(true);
});
}

Now if I select an input field and scroll the cursor flickers crazily. Probably some auto focus. Any help with this is appreciated.

6

Yes I have same issue in ionic1, When I focus on input my view push up . And I am also set cordova.plugins.Keyboard.disableScroll(true); but nothing happened. Do you have any Idea how can I resolved this issue?
Thanks