I’m new to Ionic in general so I thought I would just skip v1 and start learning with v2 since it’s already in beta, and with that said, I don’t know if I’m doing something wrong in my layout or if this is some kind of bug.
I started with a simple login page:
This is the code for the page:
<ion-content scroll="false" class="login"> <ion-row center> <ion-col width-50> <h1 text-center>Login to account</h1> <ion-list> <ion-item> <ion-label stacked>Username</ion-label> <ion-input type="text"></ion-input> </ion-item> <ion-item> <ion-label stacked>Password</ion-label> <ion-input type="password"></ion-input> </ion-item> </ion-list> </ion-col> </ion-row> </ion-content>
I vertical aligned the content by adding
justify-content: center; and
ion-row. So, when I load the page as it is, it looks just like in the screenshot, and I don’t have any scroll at all. But when I click on any of the inputs to start typing (I tried it with different inputs and labels), the
scroll-content tag gets a 450px
padding-bottom out of nowhere, pushing everything up and giving me a huge scroll.
As you can see in the code, I even use a
scroll:false on the
ion-content component which I read is supposed to cancel any scroll on the content. And by the way, this also happens if I remove the
height: 100% on
ion-row, so it’s not my custom css.
Sorry for the lenghty first post but I would really appretiate if someone could tell me If I’m not doing something right or if this appears to be a bug.