Fix ion-header to top of page when keyboard appears in Ionic app

Question

I have a chat application, when I click into the textarea to start typing a new message the keyboard pushes up all the content above. This means that the ion-header disappears. I would like this to remain visible at the top of the screen at all times.

Here is an example GIF: https://i.imgur.com/a/GcmagJi

The ion-header code is:

<ion-header>    <ion-navbar>     <ion-buttons ion-fixed end>       <button ion-button icon-only (click)="closeChat()">         <ion-icon name="close-circle"></ion-icon>       </button>     </ion-buttons>    </ion-navbar>  </ion-header> 

The ion-footer code is:

<ion-footer>   <ion-grid>     <ion-row>       <ion-col col-9>         <textarea rows="3" [(ngModel)]="data.message" (keyup.enter)="sendMessage()" placeholder="Type your message ..."></textarea>       </ion-col>       <ion-col col-3>           <button ion-button (click)="sendMessage()">Send</button>       </ion-col>     </ion-row>   </ion-grid> </ion-footer> 

In my app.module.ts file I have used:

imports: [   BrowserModule,   LongPressModule,   IonicModule.forRoot(MyApp, {       scrollPadding: false,       scrollAssist: true,       autoFocusAssist: false     }   ),   IonicStorageModule.forRoot(),   DragulaModule,   HttpModule ] 

In my chat.ts I have:

constructor(private keyboard: Keyboard) {     this.keyboard.disableScroll(false);              } 

Despite all of these things nothing seems to keep the header fixed in place.

I have added the full code for my chat.html and chat.ts to the GitHib Gists below:

https://gist.github.com/christopherib/4b9e70590fb322bdc33ffbbe42d50685 https://gist.github.com/christopherib/cb3d234564c0feb1e8bf5b96f8d023c3

Answer 1

Try to run keyboard.disableScroll(true) right after platform.ready()

Or try to run keyboard.hideFormAccessoryBar(false);