# Keyboard pushing header content on focus

**URL:** <https://forum.ionicframework.com/t/keyboard-pushing-header-content-on-focus/161425>\
**Category:** Ionic Native\
**Created:** [April 11, 2019, 10:11pm UTC](https://forum.ionicframework.com/t/keyboard-pushing-header-content-on-focus/161425 "2019-04-11T22:11:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nazehs](https://avatars.discourse-cdn.com/v4/letter/n/ea666f/32.png) [@nazehs](https://forum.ionicframework.com/u/nazehs)\
**Post date:** [April 11, 2019, 10:11pm UTC](https://forum.ionicframework.com/t/keyboard-pushing-header-content-on-focus/161425/1 "2019-04-11T22:11:18Z")

</div>

![16%20PM](https://global.discourse-cdn.com/ionicframework/original/3X/8/5/85691e5a33a20a1d9cbf7a8979d49568b8065c21.jpeg) ![09%20PM](https://global.discourse-cdn.com/ionicframework/original/3X/a/d/ad6987374e8b0edb436641be2e7011cc2eb6266a.jpeg)  
I have this project on the screen dump were I am having issues when I focus on the input the, the header is automatically pushed and it will be hidden is there anything I can do to stop this weird behavior?  
my project is based on ionic 4

---

<div class="post-metadata">

**Author:** ![Unkn0wn0x](https://avatars.discourse-cdn.com/v4/letter/u/46a35a/32.png) [@Unkn0wn0x](https://forum.ionicframework.com/u/Unkn0wn0x)\
**Post date:** [April 12, 2019, 5:35pm UTC](https://forum.ionicframework.com/t/keyboard-pushing-header-content-on-focus/161425/2 "2019-04-12T17:35:53Z")

</div>

Did you make your header fixed? It looks like it’s part of the content and gets pushed out of view, due to the fact, that the content is / was shrinked by the keyboard.

---

<div class="post-metadata">

**Author:** ![nazehs](https://avatars.discourse-cdn.com/v4/letter/n/ea666f/32.png) [@nazehs](https://forum.ionicframework.com/u/nazehs)\
**Post date:** [April 12, 2019, 9:58pm UTC](https://forum.ionicframework.com/t/keyboard-pushing-header-content-on-focus/161425/3 "2019-04-12T21:58:23Z")

</div>

No… here is my code for the header

```auto
<ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
  <!-- header toolbar -->
      <ion-segment [(ngModel)]="segment" (ionChange)="updatePosts()">
        <ion-segment-button value="all">
          All
        </ion-segment-button>
        <ion-segment-button value="favorites">
          Favorites
        </ion-segment-button>
      </ion-segment>
      <ion-buttons slot="end">
        <ion-button (click)="presentFilter()">
          <ion-icon slot="icon-only" name="options"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  <!-- end of main header toolbar -->
  </ion-header>

```

---

<div class="post-metadata">

**Author:** ![nazehs](https://avatars.discourse-cdn.com/v4/letter/n/ea666f/32.png) [@nazehs](https://forum.ionicframework.com/u/nazehs)\
**Post date:** [June 5, 2019, 11:16pm UTC](https://forum.ionicframework.com/t/keyboard-pushing-header-content-on-focus/161425/4 "2019-06-05T23:16:41Z")

</div>

have some solved this pls?? I need help

---

<div class="post-metadata">

**Author:** ![venkateshb](https://avatars.discourse-cdn.com/v4/letter/v/e9bcb4/32.png) [@venkateshb](https://forum.ionicframework.com/u/venkateshb)\
**Post date:** [July 24, 2020, 6:38am UTC](https://forum.ionicframework.com/t/keyboard-pushing-header-content-on-focus/161425/5 "2020-07-24T06:38:43Z")

</div>

Seems like this is an issue for so long. no one replied. I am also facing the same issue in iOS when keyboard launches  
Here is my info:  
Ionic:

Ionic CLI : 5.4.1 (…/versions/node/v10.16.3/lib/node\_modules/ionic)  
Ionic Framework : @ionic/angular 4.11.7  
@angular-devkit/build-angular : 0.803.26  
@angular-devkit/schematics : 8.1.3  
@angular/cli : 8.1.3  
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)  
Cordova Platforms : android 8.1.0, ios 5.1.1  
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 13 other plugins)

Utility:

cordova-res : 0.8.1 (update available: 0.15.1)  
native-run : 0.2.9 (update available: 1.0.0)

I tried: not working

```auto
.scroll-content{
padding-bottom: 0px !importan;
}

and

```

.ionic-content {  
–offset-bottom: 0 !important;  
}

```auto

```

anybody?

---

<div class="post-metadata">

**Author:** ![peterkhang](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/peterkhang/32/123454_2.png) [@peterkhang](https://forum.ionicframework.com/u/peterkhang)\
**Post date:** [September 7, 2020, 2:16pm UTC](https://forum.ionicframework.com/t/keyboard-pushing-header-content-on-focus/161425/6 "2020-09-07T14:16:13Z")

</div>

```auto
<ion-header>
  <ion-toolbar color="--bory-blue">
    <ion-buttons slot="start">
      <ion-menu-button color="light"></ion-menu-button>
    </ion-buttons>
    <ion-title>
      SpeechMate::{{auth.title}}
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <div class="videoIn">
    <div class="col-md-5">
      <h3>Local stream</h3>
      <video id="videoInput" autoplay
        poster="{{auth.root}}assets/png/webrtc.png"></video>
    </div>
  </div>
  <div class="row">
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <ion-button class="start" color="white" (click)='startAfterCheckPermission()' color="primary" *ngIf="status === NO_CALL">start</ion-button>
          <ion-button class="start" color="white" (click)='stop()' color="danger" *ngIf="status === POST_CALL || status === IN_CALL || status === IN_PLAY">stop</ion-button>
          <ion-button class="start" color="white" (click)='play()' color="primary" *ngIf="status === NO_CALL">play</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <div class="videoOut">
    <h3>Remote stream</h3>
    <video id="videoOutput" autoplay
      poster="{{auth.root}}assets/png/webrtc.png"></video>
  </div>
  <div class="row">
    <div class="col-md-12">
      <label class="control-label" for="console">Console</label><br>
      <br>
      <div id="console" class="democonsole">
        <ul></ul>
      </div>
    </div>
  </div>
  <div id="layer" *ngIf="show"><img src="{{auth.root}}assets/imgs/loading.gif"/></div>
</ion-content>

```

This is my HTML sample  
I have got the issue when using v3, but I have no issue about that recently.