Skip to content

Keyboard blocks the input fields of the modal. #6377

@Langstra

Description

@Langstra

Short description of the problem:

When the keyboard pops up it blocks/pushes away the input fields/view of the modal.

I have the basic tabs application starter kit and added a modal. In the modal I have a few input fields. When I focus on a input field the keyboard pops up. Then the height of the view of the modal is so small you can not see anything. The screenshot shows exactly what I mean.

Screenshot of the issue

What behavior are you expecting?

The keyboard should not push away the view. In the worst case it should push the modal away to center it between the top of the screen and the top of the keyboard.

Steps to reproduce:

  1. Download the tabs starter template.
  2. Insert the modal example as written in the documentation.
  3. Build the app for Android using ionic run android

Other information:
I ran the application on a Samsung tablet with Android Lollipop and using the swiftkey keyboard. I also tested this on a Asus tablet running Lollipop with the default Android keyboard. I believe this is not an issue on phones, because on phones the modal does not have any spacing between the screen borders and the modal borders.

Which Ionic Version?
1.3

Plunker that shows an example of your issue

http://plnkr.co/edit/BMPqjV0P3dPAjwSvMalJ?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 5.3.3
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 1.3.0
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Distributor ID: Ubuntu Description: Ubuntu 15.10
Node Version: v0.12.7

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions