Content moves when input is focused [solved]

This is causing me huge problems and I have no idea why!

If I click on an input:
On iOS, the keyboard opens and stays open and the entire content which is in the <ion-content> container is moved somewhere completely off the screen and is not visible (including the input that was just selected)

Then if I click anywhere on the screen, the keyboard closes and the content all appears again.

On Android, the content flashes and the keyboard looks like it’s trying to open but then it closes instantly, therefore I am unable to select the input to type in at all.

Only happens on devices, does not happen when running on my computer using ionic serve --lab

Doesn’t happen on my login page which is at a state of one level (e.g. ‘login’)
Does happen on all other states which are nested inside a side menu and tabs (e.g. ‘menu.tabs.dashboard’ and ‘menu.tabs.hello’)

Does happen when modal is open (when selecting an input in the modal, the main content behind the modal disappears, however the modal stays how it should and I can actually type into these ones)

Changing cordova.plugins.Keyboard.disableScroll(); doesnt seem to help.

Any ideas what would cause this? Selecting an input is rather a common interaction!

Turns out this problem is from having the hide-on-keyboard-open class still added to my tabs. I think this might have been from a previous version of ionic where the tabs on android were at the bottom?

Anyway, seems like it works now by taking that class off!

1 Like