Keyboard pushing content strangely


#1

I have the following content for my login page:

<ion-content class="login">
    <div class="overlay">

      <button class="menu-button" ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
      </button>

      <div class="space"></div>
      <ion-grid>
        <ion-row>
          <ion-col col-12 text-center>
              <h1>
                Incredible Weather
              </h1>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-12 text-center>
              <h2>
                SignIn to access
              </h2>
          </ion-col>
        </ion-row>
      </ion-grid>

      <!-- <ion-content> -->
      <form #f="ngForm" (ngSubmit)="onSignIn(f)">
         <ion-grid>
          <ion-row>
            <ion-col col-10 offset-1> 
              <ion-list>
                <ion-item>
                  <ion-label floating>Username</ion-label>
                  <ion-input type="text" ngModel name="Mail" required></ion-input>
                </ion-item>

                <ion-item>
                  <ion-label floating>Password</ion-label>
                  <ion-input type="password" ngModel name="Password" required></ion-input>
                </ion-item>
              </ion-list>
             </ion-col>
          </ion-row>

          <ion-row>
            <ion-col col-10 offset-1> 
              <button ion-button block type="submit" [disabled]="!f.valid">Sign In</button>
             </ion-col>
          </ion-row>
        
        </ion-grid> 
      </form>

      <div class="sign-in" style="text-align:center">
        <p style="color:#fff;">Please <a style="text-decoration:underline; color:greenyellow" (click)='signInPage()'>sign up</a> before loggin in.</p>
      </div>

      <!-- </ion-content> -->

      

    </div>

    
  </ion-content>

And this is the markup for the page:

page-signin {
    .login{
        background-image: url("../assets/imgs/weather.jpeg") !important;
        background-repeat:no-repeat;
        background-size:cover;
        width:100%;
    }

    .button-full{
        position: fixed;
        bottom:0;
        left:0;        
    }

    .menu-button{
        position: absolute;
        top:20px;
        left:25px;
        box-shadow: none;
        margin:0;
        padding: 0;
        background: transparent;

        ion-icon{
            font-size:2.9em;
            color:greenyellow
        }
    }

    .item-md,.item-ios{
        background: none !important;
        color:#fff;
        padding-left: 0;
    }

    .item-input .label-md{
        color:#fff;//text on label
    }

    .item-input.item-input-has-focus .label-md[floating], .input-has-focus .label-md[floating]{
        color:#fff;
    }

    .item-md.item-input.item-input-has-focus.item-inner,.item-md.item-input.item-input-has-focus .item-inner{
        border-bottom-color: #fff;
        box-shadow: inset 0 -1px 0 0 #fff;
        color:#fff;
    }

    .list-md .item-input.item-input-has-focus:last-child,.list-md .item-input.input-has-focus:last-child{
         border-bottom-color: #fff;
        box-shadow: inset 0 -1px 0 0 #fff;
    }

    .space{
        padding-top:120px;
    }

    h1{
        margin-top: 2rem;
    font-size: 4rem;
    margin-bottom: 3rem;
    color: greenyellow;
    }

    h2{
        margin-top:0;
        font-size: 3rem;
        color:#fff;
    }

    .overlay{
        background: rgba(0,0, 0, .4);
        height:100vh;
    }

    
}

Now when I tap on any field keyboard shows up but doesn’t align the input well with the keyboard; it instead hides it and then when I start to type it pushes the content a towards the top.

Attaching some images for clarity:

Initial Login screen:

login

When user taps on a field like username(hides the input):

tapkeyboardlogin

When user starts typing(inputs moves a lot up):

typelogin

It might be that I am not following proper ionic styling as this is one of my starter apps in ionic. It would be great if someone can point me in the right direction so that I can learn more and proceed.