CODEWITHSUNDEEP
cssionic-framework
Chris
Chris

Reputation: 4728

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

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

Upvotes: 23

Views: 3294

Answers (4)

Miguel Carrillo
Miguel Carrillo

Reputation: 347

Have you tried using? 

<ion-content fullscreen><ion-content>

I'm currently using Ionic 4 and the header still looking good when the keyboard opens

I have the following structure

<ion-header no-border>
    <ion-toolbar>        
        <ion-fab-button>
            <ion-icon name="ios-arrow-back"></ion-icon>
        </ion-fab-button>             
        <ion-title></ion-title>
    </ion-toolbar>
</ion-header>

<ion-content fullscreen>        
    ......
</ion-content>

<ion-footer no-border>  
    ......
</ion-footer>

Upvotes: 1

parrycima
parrycima

Reputation: 945

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

Or try to run keyboard.hideFormAccessoryBar(false);

Upvotes: 1

MohammedAli
MohammedAli

Reputation: 2519

You can use ion-item-divider under the ion-header like

<ion-header>
  <ion-item-divider sticky>
    <!-- Content -->
  </ion-item-divider>
</ion-header>

sticky properties used to when header up the they fixed on top

Upvotes: 0

user6335712
user6335712

Reputation:

When the keyboard appears, run a js function. When doing so, give the header a negative margin.

Ex:

function myFunction() { document.getElementById("myDiv").style.marginBottom = "-15px"; }

Source: https://www.w3schools.com/jsref/prop_style_marginbottom.asp

There is probably more efficient solution but if position:fixed doesn't work this is the best one I can come up with.

Upvotes: 0

Related Questions