Keyboard Scroll Issue When Input Form Inside Grid

I’m experiencing the issue where the Native keyboard covers form input elements on focus. This seems to only occur when using the grid system. This is what is occurring

image

For instance it occurs with the following markup:

<ion-content>
<ion-grid>
   <ion-row responsive-sm>
        <ion-col width-50>
          <ion-list>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-list>
        </ion-col>
        <ion-col width-50>
          <ion-list>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
   <ion-row responsive-sm>
        <ion-col width-50>
          <ion-list>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-list>
        </ion-col>
        <ion-col width-50>
          <ion-list>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
   <ion-row responsive-sm>
        <ion-col width-50>
          <ion-list>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-list>
        </ion-col>
        <ion-col width-50>
          <ion-list>
            <ion-item>
              <ion-label color="primary" stacked>First Name</ion-label>
              <ion-input  type="text"></ion-input>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
</ion-grid>
</ion-content>

What’s odd is it is not happening in another Ionic 2 project that I have. The only difference that I can notice between the two projects is the working version is ionic-angular:2.0.0 and the non-working version is ionic-angular:2.1.0. I’m not sure what changed, or if Ionic supports input fields within grids. Any info on this would really be appreciated.

This is my ionic environment: IOS 10.1.1

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.9.0 
ios-sim version: 5.0.11 
OS: macOS Sierra
Node Version: v6.9.5
Xcode version: Xcode 8.2.1 Build version 8C1002
2 Likes

I have the same issue with version 2.1.0 in Android and iOS.

1 Like

I opened an issue https://github.com/driftyco/ionic/issues/10629
I’ve downgraded to ionic 2.0.0 to get it to work correctly.