title: Ionic fixed content at the bottom
body: <p>I have created a login form for my app with ionic 3, when I toggle the keyboard the content at the bottom moves to the top part.</p>
  
  <p>This is my design for the screen when keyboard is not toggled.
  <a href="https://i.stack.imgur.com/vm1s3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vm1s3.png" alt="enter image description here"></a></p>
  
  <p>When the keyboard is toggled.</p>
  
  <p><a href="https://i.stack.imgur.com/VtiXZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VtiXZ.png" alt="enter image description here"></a></p>
  
  <p>My html mockup</p>
  
  <pre><code>&lt;ion-content text-center class="login"&gt;
  
      &lt;!--top--&gt;
      &lt;form [formGroup]="valForm" (submit)="OnLogin($event, valForm.value)"&gt;
      &lt;div padding class="animated fadeIn center-On-Screen" ion-fixed&gt;
          &lt;img class="logo" src="assets/img/logo.png"&gt;
          &lt;ion-list padding&gt;
              &lt;ion-item&gt;
                  &lt;ion-input type="email" placeholder="E-mail"
                   class="form-control"  name="email" 
                   autocomplete="off" formControlName="email"
                  required&gt;&lt;/ion-input&gt;
              &lt;/ion-item&gt;
  
              &lt;ion-item&gt;
                  &lt;ion-input type="password" placeholder="Password"
                   name="password" 
                  formControlName="password" required=""&gt;&lt;/ion-input&gt;
              &lt;/ion-item&gt;
              &lt;ion-item&gt;
                  &lt;div class="forgotpass" item-right (click)="Forgotpass()"&gt;Forgot password&lt;/div&gt;
              &lt;/ion-item&gt;
  
          &lt;/ion-list&gt;
  
  
      &lt;/div&gt;
          &lt;div class="signin-content btn-holder" ion-fixed&gt;
              &lt;div class=" animated bounceInUp"&gt;
                  &lt;button ion-button block outline color="light" type="submit" [disabled]="!valForm.valid"&gt;Sign In&lt;/button&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;!--footer--&gt;
      &lt;div class="footer-content btn-holder" ion-fixed&gt;
          &lt;div class=" animated bounceInUp"&gt;
              &lt;button ion-button block color="facebook" (click)="doFbLogin()"&gt;Facebook&lt;/button&gt;
  
          &lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="footer-signup signup"&gt;
          &lt;div class="animated bounceInUp"&gt;
              &lt;a color="light" (click)="Register()"&gt;New Here?
                  &lt;strong&gt;Sign Up&lt;/strong&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p>CSS for the positioning.</p>
  
  <pre><code>.signin-content {
      position: fixed;
      bottom: 20%;
      width: 100%;
   }
  .footer-content {
      position: fixed;
      bottom: 12%;
      width: 100%;
  }
  .signup-content{
      position: fixed;
      bottom: 10%;
      width: 100%; 
  }
  </code></pre>
  
  <p>How can I make it such that the content remain at the bottom.</p>
  
  <p>My development environment.</p>
  
  <pre><code>cli packages: 
  
      @ionic/cli-utils  : 1.19.0
      ionic (Ionic CLI) : 3.19.0
  
  global packages:
  
      cordova (Cordova CLI) : 7.0.1 
  
  local packages:
  
      @ionic/app-scripts : 3.1.2
      Cordova Platforms  : android 6.2.3 ios 4.4.0
      Ionic Framework    : ionic-angular 3.7.1
  
  System:
  
      Android SDK Tools : 25.2.2
      ios-deploy        : 1.9.1 
      ios-sim           : https://registry.npmjs.org/ios-sim/-/ios-sim-5.0.12.tgz 
      Node              : v8.5.0
      npm               : 5.5.1 
      OS                : macOS High Sierra
  </code></pre>
  
  <p>Have tried this solution from this link <a href="https://gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7" rel="nofollow noreferrer">Ionic native keyboard</a> plus the solution below editing the <code>config.xml</code> but still didn't fix.</p>