Default view, no keyboard.
Initial tap on input. As you can see the input is hidden here.
After typing something. Input now places itself into view.
I don’t work much with IOS but this isn’t the default behavior is it? On android it behaves as expected where the input hovers above the keyboard on the initial tap. Does anyone now a way around this, preferably that doesn’t involve using the observables from the ionic-keyboard plugin?
After doing some more testing and trying to figure out what is causing this issue I managed to reproduce it on my Android device this time.
Page first loaded
Input tapped
After typing atleast one letter, or hitting the backspace button
For what it’s worth I’m still running beta 10.
Has anyone else experienced this issue?
For anyone who might have been following this I did put together a method to solve this.
First, what I did was download the ionic-keyboard plugin:
$ ionic plugin add ionic-plugin-keyboard
Then I needed to do a couple native things for Android and Ios keyboards to maintain similar behaviors.
For IOS:
Keyboard.disableScroll(true);
For Android I had to go into platforms/android/AndroidManifest.xml and change the rule windowSoftInputMode:
android:windowSoftInputMode="adjustPan"
This makes the keyboard overlap the content rather than just shrink the viewport height.
After I did that I had to set up three event listeners, one for when the keyboard is opened, one for when the keyboard is closed, and lastly one for a click event.
window.addEventListener('native.keyboardshow', keyboardShowHandler); window.addEventListener('native.keyboardhide', keyboardHideHandler); window.addEventListener('touchstart', tapCoordinates);
Declare some variables to be used within the events.
let y; let h; let offsetY;
First event I handled was the click event. All I did was find the Y coordinates of my click and subtract that from the height of the device.
function tapCoordinates(e) {
y = e.touches[0].clientY;
h = window.innerHeight;
offsetY = (h - y);
console.log("offset = " + offsetY);
}
Second event was the keyboard opening. The keyboard plugin conveniently handles all of this for me and even allows me to get the height of the devices keyboard. So all I did was determine whether or not the Y offset was less than keyboard height + 40px (I used 40px because it seemed like an acceptable buffer zone to prevent the input from being cut in half when the keyboard shows up) and just pushed the entire body up by that amount.
function keyboardShowHandler(e) {
let kH = e.keyboardHeight;
console.log(e.keyboardHeight);
let bodyMove = <HTMLElement>document.querySelector("ion-app"), bodyMoveStyle = bodyMove.style;
console.log("calculating " + kH + "-" + offsetY + "=" + (kH - offsetY));
if (offsetY < kH + 40) {
bodyMoveStyle.bottom = (kH - offsetY + 40) + "px";
bodyMoveStyle.top = "initial";
}
}
Lastly we check if the keyboard closes and wipe all of those styles from the “ion-app” element
function keyboardHideHandler() {
console.log('gone');
let removeStyles = <HTMLElement>document.querySelector("ion-app");
removeStyles.removeAttribute("style");
}
This seems like kind of a lot of work to emulate what the device should be doing by default though. In any case atleast I know this is going to work consistently across all devices. (I hope).
If anyone spots some issues in my code, or problems that may occur down the line, please feel free to let me know.
While this behaves exactly as expected on Android there’s still one issue with IOS (what a surprise). It seems the Keyboard.disableScroll(true) rule doesn’t behave as I initally thought it did. When the input is in focus IOS still wants to scroll the page to that element. But for some reason only after the second time an input is put in focus (like really?). Since I prefer my method for now, does anyone know how to completely remove IOS default input behavior?
Thanks! Your solution is working. Actually, everything was working good until beta.9, but then they decided to change ion-content and scroll and keyboard stopped to work as expected, it could be so that they will fix it in coming releases.
Decided to look at this one more time and I noticed that the reason IOS scrolls up on input focus was due to an arbitrary amount of padding being added to the bottom of “scroll-content” when an input is put into focus. As a workaround for now I just used
scroll-content {
padding-bottom:0!important;
}
I realize using !important is generally regarded as “bad practice” but in this case it beats the alternative which is to use JS on the keyboard open event listener to manually add the 0 padding overriding the function already there.
Can anyone from the Ionic team confirm whether this is default IOS functionality or something you guys have thrown in to help snap to input elements on focus?
Good solution thanks. Also adding this made it just as I want.
ion-app, ion-nav, ion-tab, ion-tabs, .app-root{
-webkit-transition: bottom 0.3s;
transition: bottom 0.3s;
}Sorry bother again in this issue, and for my english.
but i’m having problem to run this code, i got confused in the part, i already try in $(“ion-content”) but i think its not it. coul you give me a light ?
Looks to me like you’re trying to use a jQuery selector with $(‘ion-content’) refer back to the part where I define the variable bodyMove (ex. let bodyMove = …)
.scroll-content {
padding-bottom:0!important;
}
worked for me. But as you said, may be not the best solution.
source Based on scrollAssist config value the scroll padding is added.
In the scss styles here, padding is set to 0 with “no-padding” attribute. But this get overridden when keyboard appears.
This scroll thing really helped.
Thanks Mate 
This Scroll thing really Helped.
Thanks Mate
It worked like a charme! Thank you
Hi! Nice solution! Works wonderfully. What can one use to update the offset when having multiple vertically aligned inputs?
@CurtisDrumeo Thanks a lot. Your Solutions works perfectly.
Hi CurtisDrumeo, I am trying to apply your solution on keyboard issue for android platform. I have installed the IONIC keyboard plugin & changed android:windowSoftInputMode to adjustPan. I am facing issue setting the style dynamically after the calculation. (keyboard hides the portion of the view)
If I use the below code in Angular 1.x version I am getting error
document.querySelector(“ion-app”), bodyMoveStyle = bodyMove.style;
So I have changed it as follows.
let bodyMove = angular.element(document.querySelector(“ion-app”));
let bodyMoveStyle = bodyMove[0].style;
console.log("calculating " + kH + “-” + offsetY + “=” + (kH - offsetY));
if (offsetY < kH + 40) {
bodyMoveStyle.bottom = (kH - offsetY + 40) + "px";
bodyMoveStyle.top = "initial";
}
}
Please let me know If I am doing something wrong, Please how I can achieve the same in angular 1.x version.
Appreciate your effort. Thanks.
Hi ,I used your code and in middle i was getting white space on header and also when i came back from other page, here is the attachment…[quote=“CurtisDrumeo, post:3, topic:60827, full:true”]
For anyone who might have been following this I did put together a method to solve this.
First, what I did was download the ionic-keyboard plugin:
$ ionic plugin add ionic-plugin-keyboard
Then I needed to do a couple native things for Android and Ios keyboards to maintain similar behaviors.
For IOS:
Keyboard.disableScroll(true);
For Android I had to go into platforms/android/AndroidManifest.xml and change the rule windowSoftInputMode:
android:windowSoftInputMode="adjustPan"
This makes the keyboard overlap the content rather than just shrink the viewport height.
After I did that I had to set up three event listeners, one for when the keyboard is opened, one for when the keyboard is closed, and lastly one for a click event.
window.addEventListener('native.keyboardshow', keyboardShowHandler); window.addEventListener('native.keyboardhide', keyboardHideHandler); window.addEventListener('touchstart', tapCoordinates);
Declare some variables to be used within the events.
let y; let h; let offsetY;
First event I handled was the click event. All I did was find the Y coordinates of my click and subtract that from the height of the device.
function tapCoordinates(e) {
y = e.touches[0].clientY;
h = window.innerHeight;
offsetY = (h - y);
console.log("offset = " + offsetY);
}
Second event was the keyboard opening. The keyboard plugin conveniently handles all of this for me and even allows me to get the height of the devices keyboard. So all I did was determine whether or not the Y offset was less than keyboard height + 40px (I used 40px because it seemed like an acceptable buffer zone to prevent the input from being cut in half when the keyboard shows up) and just pushed the entire body up by that amount.
function keyboardShowHandler(e) {
let kH = e.keyboardHeight;
console.log(e.keyboardHeight);
let bodyMove = <HTMLElement>document.querySelector("ion-app"), bodyMoveStyle = bodyMove.style;
console.log("calculating " + kH + "-" + offsetY + "=" + (kH - offsetY));
if (offsetY < kH + 40) {
bodyMoveStyle.bottom = (kH - offsetY + 40) + "px";
bodyMoveStyle.top = "initial";
}
}
Lastly we check if the keyboard closes and wipe all of those styles from the “ion-app” element
function keyboardHideHandler() {
console.log('gone');
let removeStyles = <HTMLElement>document.querySelector("ion-app");
removeStyles.removeAttribute("style");
}
This seems like kind of a lot of work to emulate what the device should be doing by default though. In any case atleast I know this is going to work consistently across all devices. (I hope).
If anyone spots some issues in my code, or problems that may occur down the line, please feel free to let me know.
[/quote]
Hi, I used your code but getting whitespace on top of the header after coming back from other screen in my app and am getting the output what was expected but extra white space is adding.Can u plz help me .
And the screen shot is
Thank you for your reply! It helped me solve a similar issue. I needed the keyboard to appear and not push my navbar way. So, on my ionViewDidEnter function I did this trick: Keyboard.disableScroll(true); to stop pushing my navbar.
However, the keyboard now overlaps my input this way… So I used your idea to addEventListener on the keyboard iteration to force the property bottom of my input to be my keyboard height!
Thanks a lot!
at which file should i insert the addEventListener?
Thank you, this is very helpful.
