Ionic keyboard issue

hi team,

we are getting an issue related to keyboard…okay the issue is when we are typing in the ion-input / ion-textarea
field …the input field is hiding behind the keyboard and adding a white space on top of keyboard(if input field is at the bottom position of the app and we are actually trying to type something…the keyboard is actually pulling the input field to the top but we are unable to see bcoz of white space added)…

And am using html code like below:

<ion-content padding>
   <ion-card style="background-color: #F3F3F3; border-radius:20px;margin:0px 0px 10px 0px ;width:100%;box-shadow:none;padding-bottom: 10px;">
    <p style="text-align: center;margin:20px;">This is the basic Card.</p>
    <P style="text-align: center;margin:20px;">Iam going to check keyboard behaviour</P>
    <p style="text-align: center;margin:20px;">This is the basic Card.</p>
    <P style="text-align: center;margin:20px;">Iam going to check keyboard behaviour</P>
   <ion-item no-lines style="background-color: transparent;margin-bottom:20px;width:94%;">  
      <ion-input autocomplete="on" autocorrect="on"  type="text" placeholder="username"></ion-input>
    </ion-item>
   </ion-card>
    <ion-card style="background-color: #F3F3F3; border-radius:20px;margin:0px 0px 10px 0px ;width:100%;box-shadow:none;padding-bottom: 10px;">
    <p style="text-align: center;margin:20px;">This is the basic Card.</p>
    <P style="text-align: center;margin:20px;">Iam going to check keyboard behaviour</P>
    <p style="text-align: center;margin:20px;">This is the basic Card.</p>
    <P style="text-align: center;margin:20px;">Iam going to check keyboard behaviour</P>
   <ion-item no-lines style="background-color: transparent;margin-bottom:20px;width:94%;">  
      <ion-input autocomplete="on" autocorrect="on"  type="text" placeholder="username"></ion-input>
    </ion-item>
   </ion-card>
    <ion-card style="background-color: #F3F3F3; border-radius:20px;margin:0px 0px 10px 0px ;width:100%;box-shadow:none;padding-bottom: 10px;">
    <p style="text-align: center;margin:20px;">This is the basic Card.</p>
    <P style="text-align: center;margin:20px;">Iam going to check keyboard behaviour</P>
    <p style="text-align: center;margin:20px;">This is the basic Card.</p>
    <P style="text-align: center;margin:20px;">Iam going to check keyboard behaviour</P>
   <ion-item no-lines style="background-color: transparent;margin-bottom:20px;width:94%;">  
      <ion-input autocomplete="on" autocorrect="on"  type="text" placeholder="username"></ion-input>
    </ion-item>
   </ion-card>
</ion-content>