Hi Guys,
does anyone has a solution for the problem, that my keyboard overlaps the i’m currently building an chat in which the message input should always stay at the bottom. When i tap on the input on the phone, the keyboard opens and the footer isn’t coming up.
Please help me there would be very, very helpful.
Greetings Daniel
ramon
December 14, 2016, 9:38am
2
There’s an open issue on GitHub:
opened 09:36PM - 30 Jun 16 UTC
closed 09:11PM - 28 Nov 18 UTC
ionitron: v3
#### Short description of the problem:
When an `<ion-input type="text">` is pla… ced inside an `<ion-toolbar>` in an `<ion-footer>`, the iOS keyboard overlaps text inputs placed in an `<ion-footer>` and the entire page "jumps" when the input receives focus.
#### What behavior are you expecting?
I would expect the text input to be shown above the keyboard so the user can see what they're typing, similar to what happens in the Messages app on iOS. I also wouldn't expect the entire page to jump down immediately after the input receives focus.
**Steps to reproduce:**
1. Create a new project with the `blank` template
2. Add the following to `home.html`, run the app on iOS, and focus on the text input
```
<ion-footer>
<ion-toolbar>
<ion-input type="text" placeholder="Add a message..."></ion-input>
</ion-toolbar>
</ion-footer>
```
**Which Ionic Version?** 1.x or 2.x
2.x
**Run `ionic info` from terminal/cmd prompt:** (paste output below)
Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.31
Ionic App Lib Version: 2.0.0-beta.17
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.2.3
Xcode version: Xcode 7.3.1 Build version 7D1014
And some related topics in this forum:
Keyborad is operlapping on input, i am using ion-input tag for ionic 2.
Condition:
Whenever will tap on ion-input then keyboard is shown but ion-input hide. Once i type on keyboard then it’s showing on the screen.
Result Expected: once the tap on ion-input then whole screen and keyboard need to show accordingly
Observation:
If i use same ion-input in footer then it works but it’s not working in the ion-content.
Code are below:
Log In
<form #loginForm="ngForm" novalidate>
…
Did not found similar topic within ionic2, so maybe anyone already faced this problem…
Screenshots are from real device, not simulator!
For the ion-header inputs everything works like a charm:
[image]
But for the part with footer and bottom tabs keyboard breaks everything:
when we focus into textarea input in footer it just does not show footer toolbar:
[image]
but when start to type, it reveals all together—both footer toolbar AND bottom tabbar:
[image]