title: Keyboard pushes text field inside modal popUp to the top
body: <p>In my app as soon as the popup(modal) apear with the component (add) inside him, the component is an input,when i want to write something the keyboard push my component and my modal to the top.</p>
  
  <p>I want it to be fixed even if the keyboard is here.</p>
  
  <p>This is the modal.html</p>
  
  <pre><code>&lt;ion-content class="card"  overflow-scroll="false"padding&gt;
  
    &lt;ion-navbar&gt;
      &lt;ion-buttons start&gt;
      &lt;button style="background-color: #F8F8F8"&gt;
         &lt;ion-icon name="close"style="font-size: 25px;
         background-color: #F8F8F8"   (click)="dismiss()"&gt;&lt;/ion-icon&gt;
        &lt;/button&gt;
      &lt;/ion-buttons&gt;
  
    &lt;/ion-navbar&gt;
  
    &lt;add&gt;&lt;/add&gt;
    &lt;button ion-button color="red" &gt;
    &lt;/button&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>the css of the model.css</p>
  
  <pre><code>.card {
    max-width: 90%;
    max-height:55%;
    top: 10%;
    overflow: hidden !important;
    left: 5%; 
    right: 5%; 
    bottom: 5%;
    background-color: red;
  
  }
  </code></pre>
  
  <p>The component.html</p>
  
  <pre><code>&lt;div class="add-content"&gt;
    &lt;div&gt;
      &lt;ion-item class="code"&gt;
        &lt;ion-input type="text" maxlength="4"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
      &lt;span class="dash"&gt;-&lt;/span&gt;
      &lt;ion-item class="code"&gt;
        &lt;ion-inputtype="text" maxlength="4"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>component.css</p>
  
  <pre><code>add .code {
    display: inline-block;
    width: 100%;
    max-width: 37%;
  }
  
  add button {
   margin: 5%
  }
  
  add input {
    letter-spacing: 4.8px;
    text-align:center
  }
  </code></pre>